Comments (2)
A workaround could be to wrap the component in another element, then watch the click event on it to focus the inner input...
<div
id={id}
onClick={() => (document.querySelector(`#${id} .rti--input`) as HTMLInputElement).focus()}
>
<TagsInput
value={selected}
onChange={setSelected}
/>
</div>
Ideally, this lib would expose the ref from the inner input for this kind of thing.
from react-tag-input-component.
Here is a fully working (as Id expect UX-wise, anyway) solution. It uses onMouseDown
instead of onClick
because onMouseDown
is fired before any blur
event, so will allow the input to always retain focus. YMMV but Ive logged the interaction events and it all seems to work as expected:
const EmailsInput = () => {
const [selected, setSelected] = useState([]);
const wrapperRef = useRef(null);
const handleWrapperClick = e => {
const wrapperEl = wrapperRef.current;
if (!wrapperEl) {
return;
}
const rtiContainerEl = wrapperEl.querySelector(".rti--container");
const rtiInputEl = wrapperEl.querySelector(".rti--input");
if (!rtiInputEl) {
return;
}
// Prevent default so that the input doesn't lose focus, if the mousedown
// event occured on the RTI container el wrapped by our outer wrapper el.
if (e.target === rtiContainerEl) {
e.preventDefault();
}
// Focus the input. If it was previously focused it will retain focus.
rtiInputEl.focus();
};
return (
<div ref={wrapperRef} onMouseDown={handleWrapperClick}>
<TagsInput
value={selected}
onChange={setSelected}
name="Email Addresses"
placeHolder="Add Email Address..."
isEditOnRemove={true}
separators={
[
"Enter",
"Tab",
",",
" "
]
}
/>
<div className="flex flex-row justify-end text-xs text-zinc-500 mt-2">
<em>Press "return" or "enter" to add new emails.</em>
</div>
</div>
);
};
Bless.
from react-tag-input-component.
Related Issues (20)
- Space separators is not working HOT 2
- Spread props to input component HOT 1
- Feature request: multiple values per tag
- How to add class to rti--container class?
- Add className to props HOT 2
- remove focus ring HOT 3
- Minor css change for a better user experience
- Feature request: Forward ref to the input element HOT 2
- Bug: types for value is optional but actually required
- Bug: npm install error. conflict on resolving peer deps for react@18 HOT 1
- No way to create tags on mobile HOT 2
- Add Props to stop adding tags if exist before
- connect to data source to re-use tags?
- Feature request: Set max number of tags? HOT 1
- [Feature request] Handling paste and then split it
- Feature Request: maxLength HOT 1
- seprators prop not working HOT 1
- [Enhancement] Input is Required
- Tags
- Setting Initital tags calling triggers onChange
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 react-tag-input-component.