Hi,

It sounds like you're using a Livewire modal with a Tagify input in a form, and you're encountering an issue where pressing the "Tab" or "Comma" button triggers the form submission. To address this, you can consider the following steps:

1. Prevent Default Behavior
When the "Tab" or "Comma" button is pressed, it might trigger the default behaviour of moving to the following input field or triggering the form submission. You can prevent this default behaviour using JavaScript.

2. JavaScript Event Handling
You can add event listeners to the Tagify input element to capture the "Tab" and "Comma" key presses. Inside the event handlers, you can prevent the default behavior and handle the tag creation manually.

3. Livewire Interaction
Ensure that Livewire interactions and form submissions do not conflict with the event handling. You might need to use Livewire's `wire:ignore` directive on the Tagify input to exclude it from Livewire reactivity.

Here's a simplified example of how you might approach this:

<!-- In your Livewire view blade file -->
<form wire:submit.prevent="saveData">
 <!-- Other form fields -->

 <input
 x-data
 x-ref="tagifyInput"
 x-on:keydown.tab.prevent="handleTabKey"
 x-on:keydown.comma.prevent="handleCommaKey"
 wire:ignore
 name="tags"
 />

 <!-- Other form fields -->

 <button type="submit">Submit</button>
</form>

<script>
 function handleTabKey(event) {
 // Handle Tab key press
 event.preventDefault();
 // Implement your custom logic for handling the Tab key press
 }

 function handleCommaKey(event) {
 // Handle Comma key press
 event.preventDefault();
 // Implement your custom logic for handling the Comma key press
 }
</script>

Hi,

You're welcome! I'm glad to hear that you were able to resolve the issue. If you have any more questions or need further assistance in the future, don't hesitate to reach out. Have a great day!

Thanks