We Keep Coding

Why List element only gets selected when clicked twice?

I am building a React application and using react-final-form library. I am rendering a select component, but on selecting an item it doesn't get selected. On selecting again, then only it gets selected. I'm not sure why select component state is not getting changed ? Could anyone please check and assist.
Here is the code sandbox link : https://codesandbox.io/s/broken-sunset-9ogwc8?file=/src/Components/Actors.jsx
Regards.

In your NativeSelectField.jsx, change the onChange handler as below:
<NativeSelect
...
...
onChange={(event) => {
input.onChange(event.target.value);
}}
...
...
/>
Working Demo

react-select function call on click event on the chip

Hi I am trying to change a state in my component when there is a click event on a particular chip rendered in the search bar. Is that possible to do?
I am aware of the multiValue multiValueLabel and I can for example change the background color of the chip with that, so I thought I could use those tags to change the state but I didn't have any luck.
I have attempted to find a solution with isSelected tag but I am always reading undefined in the states.isSelected when console.logged it.
I feel like I need a onClick() functionality somewhere but I can't figure it out. A bit of a guidance would be much appreciated!
I am sharing a live code here so maybe we can discuss over it.

if you want to validate if an option is selected you could use the prop: isOptionSelected
or
const onChange = selectedOptions => setSelected(selectedOptions);
with props
isMulti
value={selected}
onChange={onChange}
components={{
MultiValue: SortableMultiValue,
}}

You can attach onClick listener in MultiValueLabel component
<Select
isMulti={true}
components={{
MultiValueLabel: (props) => {
return (
<div onClick={() => console.log(props.data)}>
<components.MultiValueLabel {...props} />
</div>
);
}
}}
{...}
/>
Live Demo

react-testing-library getAll and then filter to find an element

I have a page which renders a list of custom checkboxes.
Each checkbox looks like this.
<div
className="checkbox"
role="checkbox"
onClick={onClick}
onKeyPress={onKeyPress}
aria-checked={getState().checked}
tabIndex={0}
>
{getState().checked ? (
<span className="checkbox__icon checkbox__selected">
<Icon src="/icons/check-box-selected.svg" alt="checkbox selected" />
</span>
) : (
<span className="checkbox__icon">
<Icon src="/icons/check-box-empty.svg" alt="checkbox not selected" />
</span>
)}
<span className="checkbox__label">{label}</span>
</div>
I would like to be able to find a particular checkbox while testing.
The checkboxes differ in their labels (currently implemented using span and key/click handlers).
I want to test when the label is clicked, the image should change.
Let's say user clicked on checkbox1 with label "checkbox1", the image should change from "checkbox selected" to "checkbox not selected"
I am facing issues while trying to get reference to a checkbox with a particular label.
If i do getByText("checkbox1") , it returns me the span element, and I don't have a reference to the actual checkbox to assert whether the image has changed.
My workaround for now is to getAllByRole and then filter(item => item.textContext === "checkbox1") and then queryByAltText.
Is there a better approach to test this?

Well, the best way, in my opinion, will be to give the checkbox div an id prop with the label var and just do getElementByID.
But if you get the span like you say you can always do .parentElement and get the checkbox div.
You can also use .closest("div.checkbox"); on the sapn and it will look for the closest div with class checkbox.

Chip inside select field in material ui and react

i'm having a little issue here and i need your help.
I want to render a select field with chip inside of it. I successfully implement this but i'm having a little issue. When i click in one of my chip inside the dropdown the dropdown text is showing nothing. I add the propery primaryText inside the menu item and the value is shown successfully but not with the way i wish. Here is a screenshot:
And here is my code:
<MenuItem
key={id}
value={id}
style={styles.scroll}
primaryText={id}
>
<Chip
key={id}
style={styles.chip}
onClick={() => customerSessionSelector(id)}
onRequestDelete={() => handleRequestDelete(id)}
>
{id}
</Chip>
</MenuItem>
For not showing the text under the chip i remove the primaryText property but when i select the value the value is now showing? Any ideas of how to achieve something like this?

Getting text of Radio in Ant.desing and React.js

I'm using Ant Desing Radio with react js for creating a radio button. and i create a Radio button like this with map function :
<RadioGroup onChange={this.setActivityType} defaultValue={this.props.activityTypes[0].value} size="large">
{this.props.activityTypes.map((type,i)=>(
<RadioButton key={i} value={type.value} >{type.name}</RadioButton>
))}
</RadioGroup>
also in onChange={this.setActivityType} function i can see e.target.value that is passed as value={type.value} i also need name of between tag of <RadioButton> , the {type.name} but i can't see any properties in developer tools or antd docs ? dose anyone know how to access this property and save it to state with onChange?

To access the name of each RadioButton define a name property with each RadioButton like this:
<RadioButton key={i} value={type.value} name={type.name}>{type.name}</RadioButton>
Now inside onChange method access that name by e.target.name.