__menu_blur__ fired for unknown reason

[NitsanBaleli]

my case is a rather special one, since downshift is being used inside a leaflet popup.
problem doesn't appear when component is outside the popup (i.e top of the page)

issue:
above the normal list items i've placed a button (Im trying to make a dedicated 'add item' item in the menu)
that button when first clicked when inside the popup, fires the __menu_blur__ and closes the menu.
the actions are being console logged and I can see the difference between the two components

link: https://codesandbox.io/s/so-downshift-leaflet-track-the-bug-xr638

if this question is out of scope then I apologize sincerely

[silviuaavram]

I will take a look and see if I can help figure it out.

[NitsanBaleli]

@silviuaavram
just had another go with another example of downshift, still not luck
I've added react-select and it seems to not have an issue

https://codesandbox.io/s/so-downshift-leaflet-track-the-bug-with-react-select-duk4e

[silviuaavram]

@NitsanBaleli can you pass the iframe object to Downshift as well? https://www.downshift-js.com/use-select#custom-window for reference.

Also check you console errors as well, as it complains that getMenuProps is not called. If you look at any of our examples, the <ul> is always rendered, you should conditionally render only the items.

Let me know if this helps.

[NitsanBaleli]

@silviuaavram
here's a new sandbox with the changes you've mentioned.
I've only passed the window object to the component, I hope that's what you meant?
https://codesandbox.io/s/so-downshift-leaflet-track-the-bug-try-1-5ufwz?file=/src/MySelect.tsx

It seems that a focusable element inside the list cannot be clicked.
a regular div can be interacted with without an issue (as seen in the video below).

clickable.mp4

[silviuaavram]

Will take a look later today. Is there a particular reason you need a focusable element in the list? :-?

[NitsanBaleli]

Yes, I have a specification for this type of select (ant-design, https://bit.ly/3vMHW0t):

input and button are focusable, I cant get around it -)

[silviuaavram]

From the design, as you can see, the focus ring is both on the input and on the list item input. it's not possible😁

You could create a separate List Item that can be added on the end of your list, which will be used only to add items. From the design above, just remove that input from the list item, leave + Add item, add text to the top input, and then select the last option to add the item. You can add the new item in the onSelectedItemChange prop.

I am pretty sure there are other ways to add items to the original list. My point is that you don't need that design to do it. Which is also impossible to achieve if you want to create a standard accessible combobox element.

[NitsanBaleli]

@silviuaavram I really appreciate your time!
I just like to point out that the above is indeed achievable using Downshift, just not in a leaflet popup, which is the original issue.

Im working with it just fine in a normal page.
so the original question stands as to why the __menu_blur__ event gets fired from within the popup but not outside.

Peek.2021-03-22.17-40.mp4

[silviuaavram]

can you provide the link to the latest codesandbox with this issue? we should be able to figure it out.

[NitsanBaleli]

here's the latest
https://codesandbox.io/s/so-downshift-leaflet-track-the-bug-xr638?file=/src/DropdownSelect.tsx

[silviuaavram]

Can it be related to #1255 ?

[silviuaavram]

I spent some time but could not figure this one out. Maybe just don't add the add item button in the menu, I don't know why it's necessary to be in the menu and not somewhere else. Comboboxes and selects have only options in the menu, and downshift encourages you to follow the correct accessibility pattern for each of these. Will close this as I don't think it's relevant anymore, please revise your designs to match the ARIA recommendations.