jaleelb / shadcn-tag-input Goto Github PK
View Code? Open in Web Editor NEWA fully-featured tag input component built with shadcn/ui
Home Page: https://emblor.jaleelbennett.com
License: MIT License
A fully-featured tag input component built with shadcn/ui
Home Page: https://emblor.jaleelbennett.com
License: MIT License
When autoComplete is enabled, I suggest making it possible to render the possible options inside a popover to avoid allocating too much screen space for this component.
Such as the Status dropdown filter in https://ui.shadcn.com/examples/tasks
Currently, when working with the autocomplete variant, the user needs to use their mouse to select a suggestion.
It would be nice to be able to ↑↓
between them.
Additional details here...
const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>((props, ref) => {
Nowhere do you use the ref in your code
const inputRef = React.useRef(null);
Here you could use the references from the props
from the description
https://github.com/JaleelB/emblor/blob/main/packages/emblor/src/tag/tag-input.tsx
No response
Hi,
Great component.
I just can'd to figure out how to close the Tag Popover when clicking outside the selection box. Do you know how to achiev it?
For example, in the first example in https://emblor.jaleelbennett.com/api-reference it is only possible to close the popover by clicking the down arrow, which is anoying and not very user friendly.
I think it migh be missing adding the PopoverClose from Radix UI library. This is suggested in https://stackoverflow.com/questions/77144813/how-to-close-radix-shadcn-popover-from-inside-of-it
thank out
Hello ✌🏽,
I was wondering if its possible to copy/paste a bunch of strings, comma sepatated, and make emblor create multiple tags, instead of just 1.
Do you think this can be made somehow?
Thanks!
Additional details here...
Hey!
First off, great contribution to OSS.
I have a minor feature that could be cool to implement for the draggable tags.
When dragging between each tag, it would increase the UX if there was some sort of visual cue (other than the dragging icon), indicating that they can be dragged.
An idea I have in mind is that when you drag a tag over another, the stationary tag moves out of the way, indicating that the dragged tag can be dropped. Maybe also add a slight bg-color to further visualize that it can be dropped there.
Example of the tag moving out of the way:
https://react-beautiful-dnd.netlify.app/iframe.html?id=board--simple
Kind regards
Thanks for the awesome project and great documentation website.
I see an error in the console (Firefox) from rendering the tags:
Warning: Invalid DOM property `stroke-linejoin`. Did you mean `strokeLinejoin`?
Appears to be from here:
emblor/packages/emblor/src/tag/tag.tsx
Line 134 in 98e5329
And looks like also occurrence here:
emblor/packages/emblor/src/ui/command.tsx
Line 53 in 98e5329
I've noticed that the autocomplete is not working properly. After the second character input, all the options disappear. I've been trying to debug this issue, but so far, I haven't had any luck in identifying the root cause.
Any guidance or suggestions would be greatly appreciated.
Despite this issue, I find the tool very useful and appreciate the effort put into developing it.
Thanks a lot.
hey,
awesome work - could you provide a license to the project?
Chevron Icon doesn't rotate when using popover for tags.
Upgrade dep tailwind-merge from 1.14.0 to v2. Or perhaps there is a way to remove the dependency? It best to have as little dependencies for these kinds of libraries, I guess. Thanks!
I am not 100% sure but my project seems to both have tailwind-merge v1 and v2 in its bundle. I think this might be related to emblor dependency still running on v1. Can you perhaps upgrade tailwind-merge to v2? https://github.com/dcastil/tailwind-merge Thnks!
First I used this its awesome. second, you forgot to put npm i uuid in docs ... I got this error while using it
Tried using the autocomplete, this is from the props section.
<TagInput
placeholder="Enter a topic"
tags={autocompleteTags}
enableAutocomplete
restrictTagsToAutocompleteOptions
autocompleteOptions={autoCompleteOptions}
className="sm:min-w-[450px]"
setTags={(newTags) => {
setAutocompleteTags(newTags);
}}
/>
After upgrading from version 1.4.0 to 1.4.2 of the emblor library, my application crashes with the following error:
TypeError: Cannot read properties of undefined (reading 'filter')
import { Tag, TagInput } from "emblor";
import { useState } from "react";
function App() {
const [tags, setTags] = useState<Tag[]>([]);
const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null);
return (
<main className="flex flex-col items-center justify-center h-screen">
<p>Tag input:</p>
<TagInput
tags={tags}
setTags={(newTags) => setTags(newTags)}
placeholder="Add a tag"
styleClasses={{
input: "w-full sm:max-w-[350px]",
}}
activeTagIndex={activeTagIndex}
setActiveTagIndex={setActiveTagIndex}
/>
</main>
);
}
export default App;
Expected Behavior:
The application should run without errors, and TagInput component should work as expected.
Actual Behavior:
The application crashes with the following error:
TypeError: Cannot read properties of undefined (reading 'filter')
https://github.com/riadhmouamnia/emblor-bug
Upon inspecting the console, the error seems to be related to the filtering of tag.text
. The relevant code snippet causing the error is:
reactExports.useMemo(() => _ ? f.filter((d) => _(d.text)) : f.filter((d) => d.text.toLowerCase().includes(O.toLowerCase())), [O, f, _])
It appears that the filter
function is being called on an undefined value, potentially due to an issue with the tag.text
property filtering.
Environment:
Can't scroll if there are too many options in the Autocomplete Suggestions Popover.
Add many tags to the autocompleteOptions
where it will overflow
https://github.com/JaleelB/emblor
No response
There's a console log for styling that is polluting my console.
console.log('styling: ', styleClasses);
N/A
No response
When tag-input is the last input field in shadcn form we can enter tags as the button is submit but when it's not the last input the button is tab (to go to the next input), so we can't submit and no tag is entered.
I'm running into the same issue as #19, where autocomplete suggestions aren't clickable. The solution in that issue didn't work for me.
Additionally, I don't see any autocomplete suggestions when the name of a tag is partially typed, but then the autocomplete panel is opened.
Thanks for the great repo and the help :)
Add Keyboard Interactions such as delete, backspace ....
for reference : https://www.radix-vue.com/components/tags-input#keyboard-interactions
you can see implementations in shadcn-vue : https://www.shadcn-vue.com/docs/components/tags-input
Currently, there is no styling provided for the Clear All button, and, I believe for the submit button (I've encountered users being confused with the useability and so use a FormDescription to indicate to them).
Providing more options for styling along with documentation would help adopt different use cases.
PS: This is my first time opening a proper issue, so apologies if it's lacking content. However I'm actively using this project in my clients websites and would love to contribute.
I'm having trouble using emblor in a Remix (vite) project. Getting the following errors:
In the vite dev server:
[vite] Error when evaluating SSR module {filepath}/form.tsx: failed to import "emblor"
In the browser:
Named export 'SortableItem' not found. The requested module 'react-easy-sort' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'react-easy-sort';
I believe vite is supposed to automatically convert commonJS modules but it's not playing nice in this case. Any pointers?
It looks like autocomplete is preventing the addition of new tags. Is it possible to combine this so that autocomplete remains functional but you can also add new tags with comma or enter?
Currently the autocomplete shows all existing tags, the list can become very long.
It would be perfect to use autocomplete in an overflow. Perhaps even in a popover so that other elements underneath are not moved too far.
Great work and many thanks
Hey, just wanted to point out that the pill shape buttons and rounded shape buttons in the UI components seem to be swapped. I could be totally wrong, but I thought I'd ask if that's what you intended. I'd like to make a PR for this if this was unintentional :)
In the shape
property for the tag-input.tsx
component, rounded
could be rounded-lg
and pill
could be rounded-full
, like the image I found online on the right:
Rounded (for shadcn-tag-input):
Pill (for shadcn-tag-input):
I believe it would provide a better user experience if the tags were automatically added when the user clicks away from the field.
Maybe a prop like addTagsOnBlur = {true}
I've managed to find a workaround to achieve this behavior like this.
const [inputValue, setInputValue] = useState("");
const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
const inputValue = event.target.value.trim();
// Add the tag if the input value is not empty
if (inputValue) {
const newTag = { id: Date.now().toString(), text: inputValue };
const updatedTags = [...tags, newTag];
setTags(updatedTags);
setValue("keywords", updatedTags);
// Clear the input
setInputValue("");
}
};
<TagInput
{...field}
// these two are important to clear the input after adding a tag
inputProps={{ value: inputValue }}
onInputChange={(value) => {
setInputValue(value);
}}
placeholder="Add tag"
tags={tags}
onBlur={handleBlur}
setTags={(newTags) => {
setInputValue("");// you need this two to clear the input on Enter
setTags(newTags);
setValue("keywords", newTags as [Tag, ...Tag[]]);
`}}`
activeTagIndex={activeTagIndex}
setActiveTagIndex={setActiveTagIndex}
/>
The downside of my code is that the maxTags no longer works properly, so I need to check it manually.
https://github.com/JaleelB/emblor/tree/main
No response
I expect the autocomplete popover to appear as soon as I start typing, but it doesn't. I'm on latest (1.4.4). failure is created by minimal reproduction with only required props enableAutocomplete={true} and autocomplete options like so
const autocompleteOptions = [
{ id: "1", text: "outdoor" },
{ id: "2", text: "indoor" },
{ id: "3", text: "level 1" },
{ id: "4", text: "level 2" },
{ id: "5", text: "east" },
{ id: "6", text: "south" },
{ id: "7", text: "west" },
{ id: "8", text: "north" },
];
Check the demo example, the autocomplete popup does not appear. https://emblor.jaleelbennett.com/api-reference
https://github.com/JaleelB/emblor
No response
Hi, I'd like to use my own function to generate the id for a newly added tag. The current implementation of your library uses the custom uuid
function in utils.ts
.
My use case is that I store the tags in my database with a uuid as key and want to add/delete tags but the created id in the frontend is not a valid guid.
@JaleelB : One handy feature I can think of right now is if we press backspace in the input field that should have removed the last tag and so on, what do you say? May be one additional prop removeOnBackspace: boolean will do the trick.
Thank you!
Feat: Prevent tags from being added if they are not in the autocomplete options or implement new functionality for this scenario
Please add the ability to use the register object directly with the input, so that we can validate them with React Hook form
The tag input has the disabled prop but giving the prop does not disable the input or the tags. Even with the disabled prop given, it is possible to remove or add tags.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.