Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

livewiere modal always submit after input tags


helo friends,

i need help

i make refrence modal using laravel livewire, im using tagify input in the form
my problem is after input tag using tab or comma button submit always click

please help

thanks


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


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


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:


Please adjust the code as per your specific use case and implementation. The key is to prevent the default behaviour of the "Tab" and "Comma" keys and implement custom logic to handle tag creation without triggering the form submission.

Remember that the actual implementation might require more details from your end, but this should give you a general idea of how to handle the situation.

Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(