Fix bug of autofocus not working with x-password

rawilk · rawilk · commit 11a409aa58e4 · 2020-09-18T22:45:38.000-05:00
diff --git a/resources/views/components/inputs/password.blade.php b/resources/views/components/inputs/password.blade.php
@@ -1,6 +1,5 @@
 <div @if ($showToggle)
         x-data="{ show: false }"
-        x-cloak
     @endif
     class="form-text-container {{ $maxWidth }}"
 >
@@ -33,6 +32,7 @@ class="form-text-container {{ $maxWidth }}"
         <div @click="show = ! show"
              :title="show ? '{{ __('Hide') }}' : '{{ __('Show') }}'"
              class="trailing-icon clickable"
+             x-cloak
         >
             <span x-show="! show">
                 {{ svg($showPasswordIcon) }}
diff --git a/tests/Components/Inputs/PasswordTest.php b/tests/Components/Inputs/PasswordTest.php
@@ -26,13 +26,13 @@ public function can_render_component(): void
 
         $expected = <<<HTML
         <div x-data="{ show: false }"
-             x-cloak
              class="form-text-container ">
             <input class="form-input form-text has-trailing-icon" name="password" id="password" :type="show ? 'text' : 'password'" />
 
             <div @click="show = ! show"
                  :title="show ? 'Hide' : 'Show'"
-                 class="trailing-icon clickable">
+                 class="trailing-icon clickable"
+                 x-cloak>
                 <span x-show="! show">
                     {$showIcon}
                 </span>
@@ -77,15 +77,15 @@ public function can_have_leading_addon(): void
 
         $expected = <<<HTML
         <div x-data="{ show: false }"
-             x-cloak
              class="form-text-container ">
              <span class="leading-addon">foo</span>
 
             <input class="form-input form-text has-leading-addon has-trailing-icon" name="password" id="password" :type="show ? 'text' : 'password'" />
 
             <div @click="show = ! show"
                  :title="show ? 'Hide' : 'Show'"
-                 class="trailing-icon clickable">
+                 class="trailing-icon clickable"
+                 x-cloak>
                 <span x-show="! show">
                     {$showIcon}
                 </span>
@@ -139,15 +139,15 @@ public function slotted_trailing_addons_are_ignored(): void
 
         $expected = <<<HTML
         <div x-data="{ show: false }"
-             x-cloak
              class="form-text-container ">
              <span class="leading-addon">foo</span>
 
             <input class="form-input form-text has-leading-addon has-trailing-icon" name="password" id="password" :type="show ? 'text' : 'password'" />
 
             <div @click="show = ! show"
                  :title="show ? 'Hide' : 'Show'"
-                 class="trailing-icon clickable">
+                 class="trailing-icon clickable"
+                 x-cloak>
                 <span x-show="! show">
                     {$showIcon}
                 </span>

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,5 @@`
`1`	`1`	`<div @if ($showToggle)`
`2`	`2`	`x-data="{ show: false }"`
`3`		`- x-cloak`
`4`	`3`	`@endif`
`5`	`4`	`class="form-text-container {{ $maxWidth }}"`
`6`	`5`	`>`
`@@ -33,6 +32,7 @@ class="form-text-container {{ $maxWidth }}"`
`33`	`32`	`<div @click="show = ! show"`
`34`	`33`	`:title="show ? '{{ __('Hide') }}' : '{{ __('Show') }}'"`
`35`	`34`	`class="trailing-icon clickable"`
	`35`	`+ x-cloak`
`36`	`36`	`>`
`37`	`37`	`<span x-show="! show">`
`38`	`38`	`{{ svg($showPasswordIcon) }}`