Questions & Answers

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:

When the select input is clicked, the list is:

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>