Setting values
Values can change in a couple of different ways: through defaults, interacting with the UI or programmatically. The select defaults to null (nothing is selected), which can be easily overridden with the defaultSelection option. The values are set by interacting with the component and making a selection or it can be done programmatically. Use the buttons option for showing/hiding set, cancel or add custom buttons.
Demo
Controlling the default value
The select has no selected value by default. You can however manually set a default value through the
defaultSelection option. This value will show as selected when opening the control, but it needs to be submitted to be accepted as a selected value.
const myData = [
{ text: 'Atlanta', value: 'atl' },
{ text: 'Berlin', value: 'ber' },
{ text: 'Boston', value: 'bos' },
{ text: 'Chicago', value: 'chi' },
{ text: 'London', value: 'lon' }
];
<Select
data={myData}
/>const myData = [
{ text: 'Atlanta', value: 'atl' },
{ text: 'Berlin', value: 'ber' },
{ text: 'Boston', value: 'bos' },
{ text: 'Chicago', value: 'chi' },
{ text: 'London', value: 'lon' }
];
const myDefault = 'ber';
<Select
data={myData}
defaultSelection={myDefault}
/>Setting values runtime
While the selected value can be changed by interacting with the select, you can set the state value to change it programmatically.
jsxconst [myValue, setMyValue] = React.useState(null);
const setBoston = (event) => {
setMyValue('bos');
};
const setLondon = (event) => {
setMyValue('lon');
};
<Button onClick={setBoston}>Boston</Button>
<Button onClick={setLondon}>London</Button>
<Select
data={myData}
value={myValue}
/>
Setting values with buttons
The button API provides shortcuts to value selection and confirmation. Add a custom button and/or remove the 'Set' button to activate auto-set, which automatically closes the dialog if a value is selected.
jsxconst myData = [
{ text: 'Atlanta', value: 'atl' },
{ text: 'Berlin', value: 'ber' },
{ text: 'Boston', value: 'bos' },
{ text: 'Chicago', value: 'chi' },
{ text: 'London', value: 'lon' }
];
<Select
data={myData}
buttons={['cancel']}
/>
JSXTSX
import { Button, Select, setOptions } from '@mobiscroll/react';
import { useCallback, useMemo, useRef, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [customSelected, setCustomSelected] = useState();
const selectRef = useRef();
const myData = useMemo(
() => [
{
text: 'Atlanta',
value: 'atl',
},
{
text: 'Berlin',
value: 'ber',
},
{
text: 'Boston',
value: 'bos',
},
{
text: 'Chicago',
value: 'chi',
},
{
text: 'London',
value: 'lon',
},
],
[],
);
const customButtons = useMemo(
() => [
{
text: 'Custom',
handler: () => {
selectRef.current.setTempVal('chi');
},
},
'set',
'cancel',
],
[],
);
const inputProps = useMemo(
() => ({
inputStyle: 'outline',
labelStyle: 'stacked',
placeholder: 'Please select...',
}),
[],
);
const setBoston = useCallback(() => {
setCustomSelected('bos');
}, []);
const setLondon = useCallback(() => {
setCustomSelected('lon');
}, []);
return (
<>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Controlling the default value</div>
<Select data={myData} label="Default" inputProps={inputProps} />
<Select data={myData} label="Custom default" inputProps={inputProps} defaultSelection="ber" />
</div>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Setting a custom value</div>
<div className="mbsc-button-group-block">
<Button onClick={setBoston}>Boston</Button>
<Button onClick={setLondon}>London</Button>
</div>
<Select data={myData} display="inline" value={customSelected} />
</div>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Buttons API</div>
<Select data={myData} ref={selectRef} label="Custom" inputProps={inputProps} buttons={customButtons} />
<Select data={myData} label="Auto set" inputProps={inputProps} buttons={['cancel']} />
</div>
</>
);
}
export default App;
import { Button, MbscPopupButton, Select, setOptions } from '@mobiscroll/react';
import { FC, useCallback, useMemo, useRef, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const myData = [
{
text: 'Atlanta',
value: 'atl',
},
{
text: 'Berlin',
value: 'ber',
},
{
text: 'Boston',
value: 'bos',
},
{
text: 'Chicago',
value: 'chi',
},
{
text: 'London',
value: 'lon',
},
];
const App: FC = () => {
const [customSelected, setCustomSelected] = useState<string>('');
const selectRef = useRef<Select | null>(null);
const customButtons = useMemo<(string | MbscPopupButton)[]>(
() => [
{
text: 'Custom',
handler: () => {
selectRef.current!.setTempVal('chi');
},
},
'set',
'cancel',
],
[],
);
const inputProps = useMemo(
() => ({
inputStyle: 'outline',
labelStyle: 'stacked',
placeholder: 'Please select...',
}),
[],
);
const setBoston = useCallback(() => {
setCustomSelected('bos');
}, []);
const setLondon = useCallback(() => {
setCustomSelected('lon');
}, []);
return (
<>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Controlling the default value</div>
<Select data={myData} label="Default" inputProps={inputProps} />
<Select data={myData} label="Custom default" inputProps={inputProps} defaultSelection="ber" />
</div>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Setting a custom value</div>
<div className="mbsc-button-group-block">
<Button onClick={setBoston}>Boston</Button>
<Button onClick={setLondon}>London</Button>
</div>
<Select data={myData} display="inline" value={customSelected} />
</div>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Buttons API</div>
<Select data={myData} ref={selectRef} label="Custom" inputProps={inputProps} buttons={customButtons} />
<Select data={myData} label="Auto set" inputProps={inputProps} buttons={['cancel']} />
</div>
</>
);
};
export default App;