JaleelB / emblor

A fully-featured tag input component built with shadcn/ui
https://emblor.jaleelbennett.com
MIT License
674 stars 31 forks source link

Inline tags show horizontal in input #45

Closed Codemaine closed 3 months ago

Codemaine commented 4 months ago

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

image

JaleelB commented 4 months ago

@Codemaine Let me know if I am missing something, but it works like this now.

Screenshot 2024-05-30 at 2 25 29 PM
Codemaine commented 4 months ago

This is how it shows on my implementation

image
Codemaine commented 4 months ago

Shows the same on the documentation

image
JaleelB commented 4 months ago

This is how it shows on my implementation

image

@Codemaine That is how it should be. You've set a width some where on the input (maybe on the parent container). If the space left in the container is less than the width of the input, the input wraps to a new line. The same logic applies to the tags as well. They wrap inside the tag list.

Other implementations of tag inputs with inline tags work the same way. Here is an example: https://mantine.dev/core/tags-input/

Codemaine commented 4 months ago

Yea, I'm aware that it's supposed to wrap when there's no available horizontal space, that's why I'm requesting for this. You should allow the user to scroll horizontally to view the tags, to keep the input's height constant.

JaleelB commented 4 months ago

Ah, I see. You didn't make that clear in your initial comment. This isn't exactly a default behavior for tag inputs so I'll have to test this out to see if it's a good fit.