Ways to make the Select component in Material-UI lose its focus state once an item has been selected

Question

Ways to make the Select component in Material-UI lose its focus state once an item has been selected

Anticipated outcome:

Upon selecting an item, the Menu list will promptly close, and the Select component will no longer display a focus state. The borderBottom will change to 1px solid, and the backgroundColor will turn to white.

Current situation:

Select behavior after selecting an item

As depicted in the above image, the borderBottom appears as 2px solid, and the backgroundColor does not reflect white, indicating that the Select component remains in a focused state.

What steps should be taken to achieve the desired outcome?

Further Explanation:

In actuality, my concern lies with the visual appearance of the Select component's focus state rather than the focus itself. I am aiming for a behavior similar to that seen on fonts.google.com. Following the selection of a style (for example, Bold 700), the Select component maintains its focus state but without displaying any visible indications of being focused, which is precisely what I am seeking.

css reactjs focus material-ui html-select

Answer 1

Answer №1

Here's an illustration demonstrating how you can personalize the focus appearance of Select.

If you're curious about customizing the underline, check out my response to a related question: How do I custom style the underline of Material-UI without using theme?

import React from "react";
...
export default withStyles(styles)(SimpleSelect);

https://codesandbox.io/s/material-demo-ttfwd?fontsize=14

Answer 2

Here's an illustration demonstrating how you can personalize the focus appearance of Select.

If you're curious about customizing the underline, check out my response to a related question: How do I custom style the underline of Material-UI without using theme?

import React from "react";
...
export default withStyles(styles)(SimpleSelect);

https://codesandbox.io/s/material-demo-ttfwd?fontsize=14

Answer 3

Answer №2

One neat little trick you can employ is to make Select lose its focus deliberately:

<>
        <InputLabel
            id="CUSTOM_TITLE"
            shrink
        >
            {ANY_TITLE}
        </InputLabel>
        <Select
            ref={YOUR_SELECT_REF}
            input={<OutlinedInput notched label="ANY_TITLE" />}
            labelId="CUSTOM_TITLE"
            onClose={() => {
                ref.current.classList.remove('Mui-focused');
                ref.current.previousSibling?.classList.remove('Mui-focused');
            }}
            onOpen={() => {
                ref.current.classList?.add('Mui-focused');
                ref.current.previousSibling?.classList.add('Mui-focused');
            }}
        >
            {props.children}
        </Select>
</>

Answer 4

One neat little trick you can employ is to make Select lose its focus deliberately:

<>
        <InputLabel
            id="CUSTOM_TITLE"
            shrink
        >
            {ANY_TITLE}
        </InputLabel>
        <Select
            ref={YOUR_SELECT_REF}
            input={<OutlinedInput notched label="ANY_TITLE" />}
            labelId="CUSTOM_TITLE"
            onClose={() => {
                ref.current.classList.remove('Mui-focused');
                ref.current.previousSibling?.classList.remove('Mui-focused');
            }}
            onOpen={() => {
                ref.current.classList?.add('Mui-focused');
                ref.current.previousSibling?.classList.add('Mui-focused');
            }}
        >
            {props.children}
        </Select>
</>

Answer 5

Answer №3

It's possible that I may have misunderstood the question, but one approach to solving this issue is by utilizing refs, as mentioned in the React documentation:

[...] Managing focus, text selection, or media playback.

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.selector= React.createRef();
    }
    render() {
        return <Selector ref={this.selector}>[...]</Selector>;
    }
}

You can then access the element itself by using this.selector.current, and you can set (or unset) its focus by calling this.selector.current.focus() or this.selector.current.blur() when the Selector's element is clicked. If you need to focus on another element upon clicking, you would obtain the ref for that specific element and handle it similarly.

I hope this solution aligns with what you were looking for!

Answer 6

It's possible that I may have misunderstood the question, but one approach to solving this issue is by utilizing refs, as mentioned in the React documentation:

[...] Managing focus, text selection, or media playback.

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.selector= React.createRef();
    }
    render() {
        return <Selector ref={this.selector}>[...]</Selector>;
    }
}

You can then access the element itself by using this.selector.current, and you can set (or unset) its focus by calling this.selector.current.focus() or this.selector.current.blur() when the Selector's element is clicked. If you need to focus on another element upon clicking, you would obtain the ref for that specific element and handle it similarly.

I hope this solution aligns with what you were looking for!

Ways to make the Select component in Material-UI lose its focus state once an item has been selected

Answer №1

Answer №2

Answer №3

Similar questions

The margin-right and margin-left properties function differently when it comes to dealing with overflow of floated divs

What is the purpose of using translateY(-50%) to vertically center an element that is positioned at top: 50%?

hyperlink triggers spacing problem in Internet Explorer

Is the background image unable to fill up the entire screen?

Ensure the item chosen is displayed on a single line, not two

challenge encountered while trying to remove ScrollTop feature on mobile gadgets

Styling group headers within an unordered list using pure CSS - possible?

Having trouble displaying dynamically added images in my jsx-react component. The images are not showing up as expected

Utilize a specific hook once certain conditions are met

Firefox is having trouble loading SVG files

Adjust the size of both the right and left price scales on TradingView Lightweight Charts

Navigating through directories in an HTML file

Angular causing WKWebview to freeze

Initiate Child Event within Parent Component

The Jest test fails to linger until the saga completes its execution

"Challenges with JWT token authentication and cross-origin resource sharing in Spring framework and React

Adjust the font size within the grid layout

Update the display of the mouse pointer

The z-index property fails to function properly when used with a relative parent and after/before pseudo-elements

Storing files in DynamoDB using Reactjs is a convenient and efficient way