CODEWITHSUNDEEP
reactjsmaterial-ui
Simon Long
Simon Long

Reputation: 1440

How do I change the IconComponent of a NativeSelect depending if it is opened or not

I am customizing NativeSelect (in Material UI v3). I want to change the IconElement depending on whether the NativeSelect is open / expanded or not. With NativeSelect it seems I cannot use the open, onOpen or onClose props.

<NativeSelect
            input={<InputBase
                className={dropdownSelectStyle.rootInputBaseStyle}/>}
            IconComponent={ExpandMore}
            {...props}>
            {
                dropdownElements.map((currEntry: string): HTMLOptionElement => (
                    <option key={currEntry} value={currEntry}>
                        {currEntry}
                    </option>
                ))
            }

        </NativeSelect>

I would like the IconComponent here to be the ExpandLess icon when the NativeSelect is open and change back to ExpandMore when the NativeSelect is closed.

Upvotes: 1

Views: 615

Answers (2)

Simon Long
Simon Long

Reputation: 1440

Still having issues despite using the suggestion above. My code

Styling: 

const useStyles: JSON = makeStyles({
    root: {
        backgroundColor: "#ffffff",
        borderWidth: 1,
        borderRadius: 0,
        borderColor: "#bfbfbf",
        borderStyle: 'solid',
        boxShadow: "0 1px 6px 0 rgba(0, 0, 0, 0.16)",
        minWidth: 279,
        "&$iconOpen": {
            transform: "rotate(180deg)"
        },
    },
    focused: {},
    iconOpen: {}
});

Main Code : 

function MyDropdownSelect(props: MyDropdownSelectPropsType): NativeSelect {
    const dropdownSelectStyle: JSON = useStyles();
    return (
        <NativeSelect
            className={dropdownSelectStyle.root}
            input={<InputBase/>}
            IconComponent={ExpandMore}
            {...props}
        >
            {
                dropdownElements.map((currEntry: string): HTMLOptionElement => (
                    <option key={currEntry} value={currEntry}>
                        {currEntry}
                    </option>
                ))
            }

        </NativeSelect>
    );
}

Shouldn't this work ??

Codesandbox added (05/11/2019) -https://codesandbox.io/s/affectionate-kowalevski-rol3v?fontsize=14

Upvotes: 0

technicallynick
technicallynick

Reputation: 1592

The NativeSelect doesn't allow for a click handler for when it opens (as you already mentioned). However, it does allow for some css modifications on open.

iconOpen .MuiNativeSelect-iconOpen Styles applied to the icon component if the popup is open.

Since the icon you're wanting to apply when it's open is simply an upside down version of the icon when it's closed, then just apply transform: rotate(180deg) to the icon when it's opened. This way, you can also add a transform timer on it for a smoother effect.

Upvotes: 1

Related Questions