jaleelb / emblor Goto Github PK

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.

You recently implemented the inline tags (which look awesome), but it would be best, if there was an option to have the tags show horizontally in the input, like the image attached. Thanks :)

With enableAutocomplete = true and inlineTags = false, there is no gap between the tags and the input. Maybe this is due to an update to shadcn.

Is there a good fix?

It works if you hit the text, but it's a bad UX if you hit the background behind it and it does nothing.

I just noticed this in the autocomplete example.

Describe the bug

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" },
  ];

How to reproduce

Check the demo example, the autocomplete popup does not appear. https://emblor.jaleelbennett.com/api-reference

Link to reproduction

https://github.com/JaleelB/emblor

Additional information

No response

Feature description

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 Context

Additional details here...

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues and PRs

Chevron Icon doesn't rotate when using popover for tags.

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?

First I used this its awesome. second, you forgot to put npm i uuid in docs ... I got this error while using it

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?

Class name attributes are not getting applied at all

Example:

    <TagInput
      placeholder={placeholder}
      tags={tags}
      className="bg-red-500"
      setTags={setTags}
      activeTagIndex={activeTagIndex}
      setActiveTagIndex={setActiveTagIndex}
    />

The red bg should be applied to the input

I saw you recently implemented the inline tags, and when I tried to implement it in my app, I got this styling issue.

Summary

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 :)

Possible solution

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:

Current screenshots from demo website:

Rounded (for shadcn-tag-input):

Pill (for shadcn-tag-input):

Add the ability for the tags to appear in the input field, similar to the image attached below

@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!

Describe the bug

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')

How to reproduce

1. Install version 1.4.2 of the emblor library.
2. Set up a React component with the following code:

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;

3. Run the application.

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')

Link to reproduction

https://github.com/riadhmouamnia/emblor-bug

Additional information

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, _])

Screenshots:

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:

• React version: 18.3.1
• React DOM version: 18.3.1
• emblor version: 1.4.2
• tailwindcss: 3.3.2
• vite: 4.3.9

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

Describe the bug

Here in the Autocomplete component setState function which is responsible for updating the count with "setTagCount" is not passed?

So when "toggleTag" function is triggered by onClick event from option that is not updating the tagCount.

For this issue when i am clicking options from the select options it's not updating the count.

On the other hand, when i am removing those that time "setTagCount" is updating, but as is deducting count going to a minus figure.

How to reproduce

1. import { TagInput } from 'emblor'
2. Pass showCount and enableAutocomplete options as true

Link to reproduction

https://github.com/JaleelB/emblor/tree/main

Additional information

No response

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

Please add the ability to use the register object directly with the input, so that we can validate them with React Hook form

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);
      }}
  />

Describe the bug

There's a console log for styling that is polluting my console.

console.log('styling: ', styleClasses);

How to reproduce

1. Added values to styleClasses
2. View the console

Link to reproduction

N/A

Additional information

No response

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.

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

Feature description

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 Context

Additional details here...

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues and PRs

hey,

awesome work - could you provide a license to the project?

Feat: Prevent tags from being added if they are not in the autocomplete options or implement new functionality for this scenario

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.

Check the images.

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 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 :)

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:

And looks like also occurrence here:

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

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

tag with longer text goes out of max width