codesandboxer | Deploy any component directly to codesandbox | Frontend Framework library

I have this code :

I'm using react-select, my api expects that i send an array of strings like this ["purple", "red", "orange"] but react-select gives me an array of objects, so what I did was map throught newValue picking each value and putting in an vaiable array, but i'm getting each value in separated arrays like this ["purple"], ["red"], ["orange"]

I'm trying to reproduce the example of the Custom MultiValueContainer Example shown in the link, but nothing seems to work properly. The element is inserted (can be found within the React Component dev-tool) but the tooltip is never shown when hovered.

The code I'm trying to run is shown here, but even the simple code given in the example does not seem to work, as shown here

What I expect is something like the following:

Has anyone an idea what essential part I am overlooking?

Thanks in advance!

I made this very simple codesandbox to show my problem.

When I click the 'x' icon that appears after adding isClearable to the Select component, it both clears the selection AND it also opens the dropdown. I do not want to open the dropdown menu, but I cannot figure out how to stop it. Any ideas?

This problem only exists on mobile browsers. The clear function works as expected on desktop browsers. To see the codesandbox on mobile, open Chrome devtools and click the "toggle device toolbar" button.

EDIT: Since I haven't received a response yet (22 hours), here are some more details. This discussion most closely resembles my issue. They discuss the cause may be due to the react-tap-event-plugin.

I have tried using the react-fastclick package since I thought it may be a delayed tap (long-pressing in mobile does not open menu).

I have tried adding a div around the Select component with the attribute onClick={e => { e.preventDefault(); e.stopPropagation(); }}

I have tried adding a dummy div, and calling document.getElementById("dummy").focus() at the end of the onChange event in the Select component.

EDIT 2: If you add an event break-point for the touchend event, click the 'x' causing the script to pause, then press F8 (resume script), the menu will not open. There must be some sort of delayed tap happening.

I am trying to use react-select's Creatable for an input field of type number. Code below.

I'm trying to implement this example that obtains the user selected value, but using the async select version.

I want to obtain the value that the user selected, but going through the docs on react-select this isn't clear how to do. If you set state equal to the inputValue, as soon as you click on the 'submit' button the inputValue is cleared. You get back

" "

instead of

user selected value

I'm not sure how to obtain the user selected value using the async select component. I have my API data successfully populating & filtering the suggestions box, but I can't figure out how to get the selected value.

I've tried numerous methods and lastly tried using the refs approach like in the above link, but the stored value shows up as null. Instead of storing the user selected value. Here is the link to my broken codesandbox.

Can anyone help or point me in the right direction?

Here is a link to a working demo if anyone gets stuck on this in the future.

how to change the arrow and put a triangle instead of it in react-select and when hover change color?

how to remove padding-top in menu drop-down react-select?

how to change hover for all elements in react-select?