Select with InputLeftElement
geeekgod opened this issue · 0 comments
Description
I'm trying to use an Icon as a Left Element in the Select Component but that's not possible by using InputLeftElement prop according to the documentation which only works on Input I guess, I also check the type declarations of Select for the same. But when I pass an Icon in the Select component with InputLeftElement it actually displays an Icon in the Left although there are some type errors in the IDE
CodeSandbox/Snack link
https://codesandbox.io/s/native-base-select-left-element-bug-sh2cv3
Steps to reproduce
- Go to the CodeSandbox link.
- Check the Select Component
- There will be a Icon on the left displayed
NativeBase Version
3.4.28
Platform
- Android
- CRA
- Expo
- iOS
- Next
Other Platform
No response
Additional Information
The actual snippet I'm using in my application:
<Select
mt={5}
InputLeftElement={
<Icon
as={<MaterialIcons name="person" />}
size={5}
ml={2}
color="gray.400"
/>
}
selectedValue={gender}
accessibilityLabel="Select your gender"
placeholder="Select your gender"
_selectedItem={{
bg: "#1D84B5",
}}
onValueChange={(itemValue: string) => setGender(itemValue)}
borderRadius={8}
backgroundColor={'#f7f7f7'}
fontSize={'md'}
fontWeight={'medium'}
padding={3}
>
<Select.Item label="Male" value="male" />
<Select.Item label="Female" value="female" />
</Select>
Result:
Type Errors in the IDE:
Type '{ children: Element[]; mt: number; InputLeftElement: Element; selectedValue: string | undefined; accessibilityLabel: string; placeholder: string; _selectedItem: { bg: "#1D84B5"; }; ... 5 more ...; padding: number; }' is not assignable to type 'IntrinsicAttributes & InterfaceSelectProps & Partial<{}> & VariantSizeColorScheme<"Select"> & { ...; }'.
Property 'InputLeftElement' does not exist on type 'IntrinsicAttributes & InterfaceSelectProps & Partial<{}> & VariantSizeColorScheme<"Select"> & { ...; }'.ts(2322)
(property) InputLeftElement: React.JSX.Element
PS: Although it's fulfilling the feature of my UI but I would prefer if there can be a dedicated InputLeftElement
prop which can serve the same instead of using a bug for it