in react native 0.71 version, click the select component, represented as an input

[ybf970928]

Description

Click the select component, and the keyboard pops up, must click the arrow to proceed can work.

CodeSandbox/Snack link

https://codesandbox.io/

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

NativeBase Version

3.4.28

Platform

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

Other Platform

No response

Additional Information

https://user-images.githubusercontent.com/63764959/229480276-118bb80d-be4c-449e-a56d-a620c4d0268a.mp4

[SupriyaGo]

Facing the same issue. Inside FormControl it is behaving like this. But outside it is working fine.

[SupriyaGo]

<FormControl isInvalid={errors.semester}> <FormControl.Label _text={{ fontSize: 'md' }}>Choose Semester</FormControl.Label> <Select // minWidth="200" accessibilityLabel="Choose Semester" placeholder="Choose Semester" _selectedItem={{ bg: 'primary.200', }} mt="1" selectedValue={state.semester} onValueChange={(value) => setState({ ...state, semester: value })} > <Select.Item label="UX Research" value="ux" /> <Select.Item label="Web Development" value="web" /> <Select.Item label="Cross Platform Development" value="cross" /> <Select.Item label="UI Designing" value="ui" /> <Select.Item label="Backend Development" value="backend" /> </Select> <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />} _text={{ fontSize: 'md' }} > {errors.semester} </FormControl.ErrorMessage> </FormControl>

[coodyme]

Facing the same issue. Inside FormControl it is behaving like this. But outside it is working fine.

Same problem here!

[pedrobeto]

Facing the same prob around here :(

[Nikita-Shuminskiy]

[astaninivan1]

After adding "isReadOnly" flag for FromControl it works correctly

[Sixtisam]

I patched it with patch-package:

diff --git a/node_modules/native-base/src/components/primitives/Input/Input.tsx b/node_modules/native-base/src/components/primitives/Input/Input.tsx
index 7902b1a..ef068a9 100644
--- a/node_modules/native-base/src/components/primitives/Input/Input.tsx
+++ b/node_modules/native-base/src/components/primitives/Input/Input.tsx
@@ -153,7 +153,8 @@ const Input = (
         secureTextEntry={type === 'password'}
         accessible
         accessibilityLabel={ariaLabel || accessibilityLabel}
-        editable={isDisabled || isReadOnly ? false : true}
+        editable={isDisabled || isReadOnly || props.editable === false ? false : true}
+        readOnly={isDisabled || isReadOnly || props.editable === false}
         w={isFullWidth ? '100%' : undefined}
         {...nonLayoutProps}
         {...resolvedFontFamily}
``` `

[abdulkadershohan]

try this add isReadOnly props to FormControl

<FormControl isReadOnly> // should work fine </FormControl>

[ppritesh]

try this add isReadOnly props to FormControl

<FormControl isReadOnly> // should work fine </FormControl>

thanks. it worked!