[Joy][Select] Cannot retrieve value from Select component using Typescript

[PFernandezTorres]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1. Created Select Component using Mui Joy
2. Added onChange event to retrieve current value
3. event.target.value is not available so retrieving value is not possible

Current behavior 😯

onChange event specifies on using these types of event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element> | React.FocusEvent<Element, Element> | null, value: {} | null. But none of those provide an option to get value from Select component

Expected behavior 🤔

It should be possible to retrieve value from Select Component

Context 🔦

I am trying to implement the Select component from MUI JOY using typescript and i added the onChange event capturer so i can get the value selected from the user but it is not possible

Your environment 🌎

System: OS: Linux 5.10 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish) Binaries: Node: 18.14.1 - ~/.nvm/versions/node/v18.14.1/bin/node Yarn: Not Found npm: 9.3.1 - ~/.nvm/versions/node/v18.14.1/bin/npm Browsers: Chrome: Not Found Firefox: Not Found npmPackages: @emotion/react: ^11.10.5 => 11.10.5 @emotion/styled: ^11.10.5 => 11.10.5 @mui/base: 5.0.0-alpha.117 @mui/core-downloads-tracker: 5.11.8 @mui/icons-material: ^5.11.0 => 5.11.0 @mui/joy: ^5.0.0-alpha.66 => 5.0.0-alpha.66 @mui/material: 5.11.8 @mui/private-theming: 5.11.7 @mui/styled-engine: 5.11.8 @mui/system: 5.11.8 @mui/types: 7.2.3 @mui/utils: 5.11.7 @types/react: ^18.0.27 => 18.0.27 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^4.9.5 => 4.9.5

Used Microsoft Edge

[PFernandezTorres]

It is not done with any events. instead of using e.target.value, use value and nothing else

That should be specified on the docs. On Material UI it says to use event.target.value but on Joy UI it is not specified and the first approach is to use the same as the previous one. It is not.

[mj12albert]

@PFernandezTorres Thanks for reporting this - I agree this can be documented more clearly

It is not done with any events. instead of using e.target.value, use value and nothing else

You are right, the "correct" way to retrieve the value should be like this:

onChange={(e, newValue) => setValue(newValue)}

as shown in this demo: https://mui.com/joy-ui/react-select/#SelectClearable.tsx

[siriwatknp]

@PFernandezTorres @mj12albert I marked this as an enhancement. The Select should support it in my opinion to have the same behavior as HTML select.

[sai6855]

i'm picking this up

[michaldudak]

See https://github.com/mui/base-ui/issues/14. The problem with event.target.value is that it's defined as a string. Also, it does not reflect the value of a multiselect. Since our Select is not a direct replacement of a native select tag but an extension of it (allowing to use non-string values, for example), I decided not to fake the native behavior. Instead, the second parameter of the change handler can be used to get the new value. What we can do, though, is to make sure the docs state this explicitly.

[PFernandezTorres]

Thank you for all the help and responding to this issue

[brandsmakr]

@michaldudak @mj12albert @PFernandezTorres @siriwatknp @siriwatknp @sai6855

I have faced the same issue which you're facing. Now I have make the solution for it.

I have set the value on click on option button. See below code.

Code: <Select indicator={<KeyboardArrowDown />} sx={{ width: 150, [& .${selectClasses.indicator}]: { transition: "0.2s", [&.${selectClasses.expanded}]: { transform: "rotate(-180deg)", }, }, }} value={phoneLoc} > <Option value="us/ca" onClick={()=>setPhoneLoc("us/ca")}>US/CA</Option> <Option value="other" onClick={()=>setPhoneLoc("other")}>other</Option> </Select>