GeekyAnts / GeekyAnts/NativeBase

Select with InputLeftElement

Open
#5,792 0 comments 0 reactions 0 assignees View on GitHub
bug triage v3
Dominant language
TypeScript
Stars
20.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

### 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](https://codesandbox.io/s/native-base-select-left-element-bug-sh2cv3).
2. Check the Select Component
3. There will be a Icon on the left displayed

### NativeBase Version

3.4.28

### Platform

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

### Other Platform

_No response_

### Additional Information

The actual snippet I'm using in my application:

```jsx
}
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}
>

```

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.