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

Capture and handle JavaScript errors within iframes specified with the srcDoc attribute

The issue with React Forward Ref not functioning properly has been identified specifically in conjunction with Custom Components

What is the procedure to switch the state using useState when an event is activated?

Troubleshooting: My jQuery script for fading in content upon document ready is not

Guide for animating individual mapped elements in react-native?

Transform React.js data from MySql into a variable

A mock or spy must be used for the jest function

What could be causing my webpack (react) build to fail when these modules are missing?

What is the best way to position a tooltip near an element for optimal visibility?

Customize the appearance of each TreeItem in JavaFX using CSS to assign unique

Tips for incorporating data attributes into <figure> elements and retrieving them using CSS

Adding map markers from a JSON feed to your React Google Map - a step-by-step guide!

Can you show me the method to import these ES6 exports? Are they specifically named exports or the default?

Mastering card sliding and spacing in React NativeLearn how to effortlessly slide cards horizontally in your React

Is there a quicker alternative to the 500ms delay caused by utilizing Display:none?

Make the element switch from hidden to visible when hovering over it using CSS

What could be causing the whitespace around this element when using SASS from Refills / Bourbon.io?

Using a combination of HTML and CSS3, craft this specific geometric design

Font rendering issue in Chrome extension

Utilizing Next.js named imports without server-side rendering