Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Select with InputLeftElement #5792

Open
3 of 5 tasks
thisisrishabh22 opened this issue Nov 4, 2023 · 0 comments
Open
3 of 5 tasks

Select with InputLeftElement #5792

thisisrishabh22 opened this issue Nov 4, 2023 · 0 comments

Comments

@thisisrishabh22
Copy link

thisisrishabh22 commented Nov 4, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant