Select on mobile trigger focus after blur event was fired #521
Description
I'm using the Select component with onSelect to trigger blur event, on desktop the component is working correctly but on mobile the Select component is still on focus.
Here's an example of my project code
const selectRef = useRef(null);
const onSelect = () => {
selectRef.current.blur();
};
return (
<div
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
height: 'calc(100vh - 16px)',
}}
>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<div>
<Select
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
onSelect={onSelect}
ref={selectRef}
dropdownMatchSelectWidth={500}
value={selectedValue}
>
<Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
<Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>
<Option value="3">Jill</Option>
</Select>
</div>
</div>
</div>
);
I looked at the Select component code it use generateSelector in src/generate.tsx, and I found that in onInternalMouseDown function there's a condition that trigger another focus event on the component it's working properly in desktop but in mobile popupElement contains always the active element menu
if (!popupElement.contains(document.activeElement)) {
selectorRef.current.focus();
}
Is it possible to add mobile check to avoid the focus for this condition ?