Issue on mobile devices

[codergigachad]

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.

[JaleelB]

Hey @codergigachad. To better assist you, could you please provide a few more details:

Version Information: Could you confirm the version of the package you are currently using? This will help us understand if you have the latest updates where the issue was addressed.

Code Snippet: Could you share a snippet of how you're implementing the autocomplete feature in your setup? This will help us identify any potential misconfigurations or specific use cases.

Browser and Environment: Which browser and version are you using? Also, are you seeing this behavior in a specific environment (e.g., development, production)?

Error Logs: Are there any console errors when you attempt to use the autocomplete feature or when the issue occurs?

Any additional information or screenshots you could provide would be greatly helpful in diagnosing the problem more accurately.

Thanks for your cooperation!

[SaicharanKandukuri]

Got same issue, In mobile devices keyboard shows tab instead of enter.

Show Image

Version: 1.4.4

Snippet ( using shadcn Form )

// rest is same from (https://emblor.jaleelbennett.com/integrations/shadcn-form)
<FormField
    control={form.control}
    name="tags"
    render={({ field }) => (
        <FormItem>
            <FormLabel>Tags</FormLabel>
            <FormControl>
                <TagInput
                    {...field}
                    styleClasses={{
                        inlineTagsContainer:
                            "border-2 border-[#E4E6EA] p-2 rounded-2xl",
                        tag: {
                            body: "flex text-[#619A17] items-center gap-2 bg-[#EDFFD6] rounded-full",
                            closeButton:
                                "text-red-500 hover:text-red-600",
                        },
                    }}
                    className="sm:min-w-[450px]"
                    placeholder="Enter Tags (optional)"
                    tags={tags}
                    setTags={(newTags) => {
                        setTags(newTags);
                        setValue(
                            "tags",
                            newTags as [
                                Tag,
                                ...Tag[],
                            ],
                        );
                    }}
                    activeTagIndex={
                        activeTagIndex
                    }
                    setActiveTagIndex={
                        setActiveTagIndex
                    }
                />
            </FormControl>
        </FormItem>
    )}
/>