New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs

iOS Safari Bug: Native Select Box Opens Unexpectedly After Modal Reset


Dear [Theme Developer / Support Team],

I’m experiencing a specific issue on iOS (Safari) devices when using the modal form provided in your theme. Here's a detailed description of the problem:

When the modal is open and contains at least one <select> input,

If I click the Cancel or Close button (which triggers a SweetAlert confirmation),

And then choose to confirm closing the modal (which resets the form using form.reset()),

The native iOS Safari browser unexpectedly automatically opens the <select> dropdown, even though the modal is being closed.

This only happens on iOS Safari, and it seems to be caused by form.reset() triggering a focus on the select element right before the modal is removed from view. The issue does not occur on Android or desktop browsers.

What I’ve Tried:

Manually blurring all <select> elements before resetting the form

Adding a short setTimeout delay before form.reset() and modal.hide()

Disabling pointer events for select during SweetAlert (via body.swal2-shown select)

Replacing the reset with a custom function that manually clears all inputs

None of these fully resolved the issue.

Please let me know if you can provide a fix or consider including a patch in future updates.

Thank you for your support!

Best regards,


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)


Hi,

Could you please provide us more details ? Which Metronic version are you using ? Metronic v8 or Metronic v9 ?

Regards,
Sean



Hi,

Metronic Product Version: 8.2.9
Demo 60: https://preview.keenthemes.com/metronic8/demo60/index.html

Best Regards.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(