Select element takes focus from input element on react native web on Safari browser

[jvzTrifork]

Description

Only a single character is accepted on controlled input when a Select element is present

CodeSandbox/Snack link

https://snack.expo.dev/MOBQ7fNEN

Steps to reproduce

1. On Safari browser
2. In Expo snack, type a letter in input component - shows up
3. Type another letter - It doesn't show up

NativeBase Version

3.4.7

Platform

• [ ] Android
• [ ] CRA
• [X] Expo
• [ ] iOS
• [ ] Next

Other Platform

Web - Safari

Additional Information

I think it is the internal input element of a Select element which takes focus.

[Krithikj20]

Hi @jvzTrifork, Thank you for reporting this issue. We will look into it.

[himgodfreyho]

Hi there. We have the exact same problem. Do you have any workarounds? Or when will it be updated? We have a big form and lots of Safari users...but changing it to another Select element is painful...

[jvzTrifork]

We ended up downgrading to version 3.4.6 which does not have this bug.

[CasuallyCaffeinated]

Any update on this issue?

[josephtannenbaum]

Also experiencing this, version 3.4.19. Does anyone know of a compatible Select element for a replacement?

[DPflasterer]

Also experiencing this. Has there been any progress made on this issue?

[omigueis]

Any update?

[gfviegas]

We have this issue too. I'd appreciate any workaround or fix, or even suggestions to other select libraries.

@Krithikj20

[gfviegas]

After some digging, I've found out the reason is the prop selection in the commonInput rendered on the Select component. After cloning the select component inside my project and removing this prop (which is extracted in nonLayoutProps) the bug goes away.

Also, the component works just fine without this prop. Perhaps it should be added only on safari on web.

[CyanoFresh]

not only on Safari, mobile Chrome also has this issue. Any update?

[lts-rad]

@lts-po and I made a work around in our codebase for this issue by creating two custom components that inherit Select.

The first is basically a no-op but needs to wrap Select from native-base https://github.com/spr-networks/super/blob/main/frontend/src/components/Select.js

The second is for the web clients https://github.com/spr-networks/super/blob/main/frontend/src/components/Select.web.js

Here is the implementation

import React from 'react'

import { Select as NBSelect } from 'native-base'


const Select = (props) => {
  const isSafari = () =>
    /Safari/.test(navigator.userAgent) &&
    /Apple Computer/.test(navigator.vendor);


  return (
    <NBSelect {...props} selection={isSafari() ? 1 : null}/>
  );
};

Select.Item = NBSelect.Item
export default Select
export { Select }

[robbporto]

Mobile Chrome for iOS has the same issue.

[NamorNimash]

Mobile Chrome for iOS has the same issue.

Yes confirm. Maybe this problem has disappeared in Glustack-ui?