Comments (6)
You can use the AutoCompleteInput
on InputGroup
just like the normal chakra Input
from choc-autocomplete.
You can use the
AutoCompleteInput
onInputGroup
just like the normal chakraInput
Doesn't this line always render an Input
element? https://github.com/anubra266/choc-autocomplete/blob/main/src/autocomplete-input.tsx#L48-L49
How would I go about using something like this:
<InputGroup>
<InputLeftElement
pointerEvents="none"
children={<PhoneIcon color="gray.300" />}
/>
<Input type="tel" placeholder="Phone number" />
</InputGroup>
from choc-autocomplete.
Just replace <Input type="tel" placeholder="Phone number" />
with <AutoCompleteInput type="tel" placeholder="Phone number" />
from choc-autocomplete.
There's an example here
from choc-autocomplete.
There's an example here
Thanks for the example! I realized that my issue is using multi-select with tags. In this case, the icon always stays at the top.
Here's a codesandbox fork showing the issue!
https://codesandbox.io/s/chakra-autocomplete-demo-forked-24le3?file=/src/multi-select.js
from choc-autocomplete.
Hi @jamesopti check this out
https://codesandbox.io/s/chakra-autocomplete-demo-forked-9tsov?file=/src/multi-select.js
from choc-autocomplete.
Related Issues (20)
- Why has react-nanny become a peer-dependency? HOT 1
- Contribution instructions should use npm HOT 1
- Reset items after submission HOT 5
- tabbing out of autocomplete input selects the focused item in multiple mode HOT 2
- Filling the component programmatically HOT 2
- Last selected item in multi-select autocomplete prefills input on external click HOT 4
- The `value` prop does nothing HOT 2
- bug: setting AutocompleteItems dynamically via state does not trigger a re-render, only after refocus rendered HOT 2
- Pressing enter when the autocomplete text box is closed selects the first entry, even when freeSolo is true HOT 2
- Named export error HOT 7
- Weird query behavior HOT 1
- How to remove Pop Over "No Results Found" HOT 4
- How to reset this single-select Autocomplete component? HOT 7
- Help with custom filter HOT 1
- Autocomplete is showing a match if the 7 last char are equal even if the "x" other are not HOT 4
- Expose Chakra Popover 'matchWidth' prop HOT 1
- Keyboard navigation causes window to scroll in some configurations HOT 3
- Styling of 'No options found!' message HOT 2
- Issue with pre focusing first item after the list changes HOT 4
- Is there a way to list all when calling `onOpen`? HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from choc-autocomplete.