menu

Questions & Answers

how to display MUI Select selected option different from how the MenuItem are displayed

Trying to seperate how the MUI label value is displayed from the selection list items.

when a value is selected: select is displayed like this: enter image description here

When the select input is clicked, the list is: enter image description here

now I want to to change the default display of when an item is selected: 1st image. to simply display a label. I don't want to be based on : the button should not be displayed. I don't know how to do this, searched and couldn't find a solution.

the code:

<FormControl ...>
        <InputLabel htmlFor = "select-device-group">
            Device Group
        </InputLabel>
        <Select
            value = {props.deviceGroup.selected} label={props.deviceGroup.selected.name}
            onChange = {props.selectDeviceGroup}
            input = {<Input id = "select-device-group"/>}>
            {props.deviceGroup.types.map(device => {
                return <MenuItem key = {device.id} value = {device} component='div'>
                    <div className='container p-0'>
                        <div className='row'>
                            <div className='col align-self-center'>
                        {device.name}
                            </div>
                            <div className='col'>
                    <a
                        title = {device.name}
                        onClick = {...}
                    >
            <span ...>
              <SVG .../>
            </span>
                    </a>
                            </div>
                        </div>
                    </div>
                </MenuItem>
            })}
        </Select>
        <FormHelperText>{props.deviceGroup.validationMessage}</FormHelperText>
    </FormControl>
Comments:
2023-01-17 00:47:30
So you don't want to show the Select button once the user selects one option. And you want to show the selected option as a label? Is that right?
Answers(0) :