KenPrz / HomeSphere

1 stars 0 forks source link

Clicking the Eye Icon Button Triggers Form Submission in Login screen #5

Closed KenPrz closed 1 year ago

KenPrz commented 1 year ago

Issue Description

When clicking the eye icon button to toggle password visibility in the login form, the form is being submitted unexpectedly. This appears to be caused by the default behavior of the button element within the form, which triggers form submission.

Steps to Reproduce:

  1. Load the login page with the provided HTML and JavaScript code.
  2. Observe the login form and the eye icon button for password visibility toggle.
  3. Click the eye icon button.

Expected Behavior

Clicking the eye icon button should toggle the password visibility without triggering form submission.

Actual Behavior

Clicking the eye icon button triggers the form submission.

KenPrz commented 1 year ago

Solution

Explicitly set the type attribute of the eye icon button to "button" to prevent its default behavior of triggering form submission.

<button type="button" class="absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer" id="passwordToggle">
    <x-fas-eye class="w-5 h-5 text-gray-500" id="showPasswordIcon" />
    <x-far-eye class="w-5 h-5 text-gray-500" id="hidePasswordIcon" style="display: none;" />
</button>
KenPrz commented 1 year ago

fixed