GeekyAnts/NativeBase

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

  1. Go to the CodeSandbox link.
  2. Check the Select Component
  3. 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:

image

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