fix(VSelect): set input type to hidden to fix potential layout issues (…

…#7544) solves #5614
vuetifyjs · Jun 18, 2019 · bd35bee · bd35bee
1 parent 5075e43
commit bd35bee
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 41 deletions.
diff --git a/...ges/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataFooter.spec.ts.snap b/...ges/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataFooter.spec.ts.snap
@@ -18,7 +18,7 @@ exports[`VDataFooter.ts should render and match snapshot 1`] = `
               <input aria-label="$vuetify.dataFooter.itemsPerPageText"
                      autocomplete="on"
                      readonly="readonly"
-                     type="text"
+                     type="hidden"
                      aria-readonly="true"
               >
             </div>
@@ -91,7 +91,7 @@ exports[`VDataFooter.ts should render first & last icons with showFirstLastPage
               <input aria-label="$vuetify.dataFooter.itemsPerPageText"
                      autocomplete="on"
                      readonly="readonly"
-                     type="text"
+                     type="hidden"
                      aria-readonly="true"
               >
             </div>
@@ -186,7 +186,7 @@ exports[`VDataFooter.ts should render in RTL mode 1`] = `
               <input aria-label="$vuetify.dataFooter.itemsPerPageText"
                      autocomplete="on"
                      readonly="readonly"
-                     type="text"
+                     type="hidden"
                      aria-readonly="true"
               >
             </div>
@@ -281,7 +281,7 @@ exports[`VDataFooter.ts should render with custom itemsPerPage 1`] = `
               <input aria-label="$vuetify.dataFooter.itemsPerPageText"
                      autocomplete="on"
                      readonly="readonly"
-                     type="text"
+                     type="hidden"
                      aria-readonly="true"
               >
             </div>
@@ -355,7 +355,7 @@ exports[`VDataFooter.ts should show current page if has showCurrentPage 1`] = `
               <input aria-label="$vuetify.dataFooter.itemsPerPageText"
                      autocomplete="on"
                      readonly="readonly"
-                     type="text"
+                     type="hidden"
                      aria-readonly="true"
               >
             </div>

diff --git a/...s/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataIterator.spec.ts.snap b/...s/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataIterator.spec.ts.snap
@@ -35,7 +35,7 @@ exports[`VDataIterator.ts should render and match snapshot 1`] = `
                 <input aria-label="$vuetify.dataFooter.itemsPerPageText"
                        autocomplete="on"
                        readonly="readonly"
-                       type="text"
+                       type="hidden"
                        aria-readonly="true"
                 >
               </div>
@@ -124,7 +124,7 @@ exports[`VDataIterator.ts should render and match snapshot with data 1`] = `
                 <input aria-label="$vuetify.dataFooter.itemsPerPageText"
                        autocomplete="on"
                        readonly="readonly"
-                       type="text"
+                       type="hidden"
                        aria-readonly="true"
                 >
               </div>
@@ -204,7 +204,7 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
                 <input aria-label="$vuetify.dataFooter.itemsPerPageText"
                        autocomplete="on"
                        readonly="readonly"
-                       type="text"
+                       type="hidden"
                        aria-readonly="true"
                 >
               </div>
@@ -284,7 +284,7 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
                 <input aria-label="$vuetify.dataFooter.itemsPerPageText"
                        autocomplete="on"
                        readonly="readonly"
-                       type="text"
+                       type="hidden"
                        aria-readonly="true"
                 >
               </div>
@@ -364,7 +364,7 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
                 <input aria-label="$vuetify.dataFooter.itemsPerPageText"
                        autocomplete="on"
                        readonly="readonly"
-                       type="text"
+                       type="hidden"
                        aria-readonly="true"
                 >
               </div>

diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap
@@ -39,7 +39,7 @@ exports[`VDataTable.ts should render 1`] = `
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
                        autocomplete="on"
                        readonly="readonly"
-                       type="text"
+                       type="hidden"
                        aria-readonly="true"
                 >
               </div>
@@ -163,7 +163,7 @@ exports[`VDataTable.ts should render loading state 1`] = `
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
                        autocomplete="on"
                        readonly="readonly"
-                       type="text"
+                       type="hidden"
                        aria-readonly="true"
                 >
               </div>
@@ -367,7 +367,7 @@ exports[`VDataTable.ts should render loading state 2`] = `
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
                        autocomplete="on"
                        readonly="readonly"
-                       type="text"
+                       type="hidden"
                        aria-readonly="true"
                 >
               </div>
@@ -653,7 +653,7 @@ exports[`VDataTable.ts should render virtual table 1`] = `
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
                        autocomplete="on"
                        readonly="readonly"
-                       type="text"
+                       type="hidden"
                        aria-readonly="true"
                 >
               </div>
@@ -841,7 +841,7 @@ exports[`VDataTable.ts should render with body slot 1`] = `
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
                        autocomplete="on"
                        readonly="readonly"
-                       type="text"
+                       type="hidden"
                        aria-readonly="true"
                 >
               </div>
@@ -1128,7 +1128,7 @@ exports[`VDataTable.ts should render with data 1`] = `
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
                        autocomplete="on"
                        readonly="readonly"
-                       type="text"
+                       type="hidden"
                        aria-readonly="true"
                 >
               </div>
@@ -1310,7 +1310,7 @@ exports[`VDataTable.ts should render with group scoped slot 1`] = `
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
                        autocomplete="on"
                        readonly="readonly"
-                       type="text"
+                       type="hidden"
                        aria-readonly="true"
                 >
               </div>
@@ -1735,7 +1735,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
                        autocomplete="on"
                        readonly="readonly"
-                       type="text"
+                       type="hidden"
                        aria-readonly="true"
                 >
               </div>
@@ -2106,7 +2106,7 @@ exports[`VDataTable.ts should render with grouped rows 1`] = `
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
                        autocomplete="on"
                        readonly="readonly"
-                       type="text"
+                       type="hidden"
                        aria-readonly="true"
                 >
               </div>
@@ -2308,7 +2308,7 @@ exports[`VDataTable.ts should render with item scoped slot 1`] = `
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
                        autocomplete="on"
                        readonly="readonly"
-                       type="text"
+                       type="hidden"
                        aria-readonly="true"
                 >
               </div>
@@ -2620,7 +2620,7 @@ exports[`VDataTable.ts should render with item.expanded scoped slot 1`] = `
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
                        autocomplete="on"
                        readonly="readonly"
-                       type="text"
+                       type="hidden"
                        aria-readonly="true"
                 >
               </div>
@@ -2955,7 +2955,7 @@ exports[`VDataTable.ts should render with showExpand 1`] = `
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
                        autocomplete="on"
                        readonly="readonly"
-                       type="text"
+                       type="hidden"
                        aria-readonly="true"
                 >
               </div>
@@ -3290,7 +3290,7 @@ exports[`VDataTable.ts should render with showExpand 2`] = `
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
                        autocomplete="on"
                        readonly="readonly"
-                       type="text"
+                       type="hidden"
                        aria-readonly="true"
                 >
               </div>
@@ -3652,7 +3652,7 @@ exports[`VDataTable.ts should render with showSelect 1`] = `
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
                        autocomplete="on"
                        readonly="readonly"
-                       type="text"
+                       type="hidden"
                        aria-readonly="true"
                 >
               </div>

diff --git a/...s/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTableHeader.spec.ts.snap b/...s/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTableHeader.spec.ts.snap
@@ -541,7 +541,7 @@ exports[`VDataTableHeader.ts mobile should render 1`] = `
                   <input aria-label="Sort by"
                          autocomplete="on"
                          readonly="readonly"
-                         type="text"
+                         type="hidden"
                          aria-readonly="true"
                   >
                 </div>
@@ -603,7 +603,7 @@ exports[`VDataTableHeader.ts mobile should render with data-table-select header
                   <input aria-label="Sort by"
                          autocomplete="on"
                          readonly="readonly"
-                         type="text"
+                         type="hidden"
                          aria-readonly="true"
                   >
                 </div>
@@ -667,7 +667,7 @@ exports[`VDataTableHeader.ts mobile should work with multiSort 1`] = `
                   <input aria-label="Sort by"
                          autocomplete="on"
                          readonly="readonly"
-                         type="text"
+                         type="hidden"
                          aria-readonly="true"
                   >
                 </div>
@@ -718,7 +718,7 @@ exports[`VDataTableHeader.ts mobile should work with showGroupBy 1`] = `
                   <input aria-label="Sort by"
                          autocomplete="on"
                          readonly="readonly"
-                         type="text"
+                         type="hidden"
                          aria-readonly="true"
                   >
                 </div>
@@ -782,7 +782,7 @@ exports[`VDataTableHeader.ts mobile should work with sortBy correctly 1`] = `
                   <input aria-label="Sort by"
                          autocomplete="on"
                          readonly="readonly"
-                         type="text"
+                         type="hidden"
                          aria-readonly="true"
                   >
                 </div>
@@ -846,7 +846,7 @@ exports[`VDataTableHeader.ts mobile should work with sortDesc correctly 1`] = `
                   <input aria-label="Sort by"
                          autocomplete="on"
                          readonly="readonly"
-                         type="text"
+                         type="hidden"
                          aria-readonly="true"
                   >
                 </div>

diff --git a/packages/vuetify/src/components/VSelect/VSelect.ts b/packages/vuetify/src/components/VSelect/VSelect.ts
@@ -419,6 +419,7 @@ export default baseMixins.extend<options>().extend({
 
       input.data!.domProps!.value = null
       input.data!.attrs!.readonly = true
+      input.data!.attrs!.type = 'hidden'
       input.data!.attrs!['aria-readonly'] = true
       input.data!.on!.keypress = this.onKeyPress
 

diff --git a/packages/vuetify/src/components/VSelect/__tests__/__snapshots__/VSelect.spec.ts.snap b/packages/vuetify/src/components/VSelect/__tests__/__snapshots__/VSelect.spec.ts.snap
@@ -27,7 +27,7 @@ exports[`VSelect.ts should only show items if they are in items 1`] = `
           </div>
           <input autocomplete="on"
                  readonly="readonly"
-                 type="text"
+                 type="hidden"
                  aria-readonly="true"
           >
         </div>
@@ -72,7 +72,7 @@ exports[`VSelect.ts should only show items if they are in items 2`] = `
         <div class="v-select__selections">
           <input autocomplete="on"
                  readonly="readonly"
-                 type="text"
+                 type="hidden"
                  aria-readonly="true"
           >
         </div>
@@ -120,7 +120,7 @@ exports[`VSelect.ts should only show items if they are in items 3`] = `
           </div>
           <input autocomplete="on"
                  readonly="readonly"
-                 type="text"
+                 type="hidden"
                  aria-readonly="true"
           >
         </div>
@@ -171,7 +171,7 @@ exports[`VSelect.ts should only show items if they are in items 4`] = `
           </div>
           <input autocomplete="on"
                  readonly="readonly"
-                 type="text"
+                 type="hidden"
                  aria-readonly="true"
           >
         </div>
@@ -216,7 +216,7 @@ exports[`VSelect.ts should render v-select correctly when not using scope slot 1
         <div class="v-select__selections">
           <input autocomplete="on"
                  readonly="readonly"
-                 type="text"
+                 type="hidden"
                  aria-readonly="true"
           >
         </div>
@@ -261,7 +261,7 @@ exports[`VSelect.ts should render v-select correctly when not using v-list-item
         <div class="v-select__selections">
           <input autocomplete="on"
                  readonly="readonly"
-                 type="text"
+                 type="hidden"
                  aria-readonly="true"
           >
         </div>
@@ -306,7 +306,7 @@ exports[`VSelect.ts should render v-select correctly when using v-list-item in i
         <div class="v-select__selections">
           <input autocomplete="on"
                  readonly="readonly"
-                 type="text"
+                 type="hidden"
                  aria-readonly="true"
           >
         </div>

diff --git a/packages/vuetify/src/components/VSelect/__tests__/__snapshots__/VSelect2.spec.ts.snap b/packages/vuetify/src/components/VSelect/__tests__/__snapshots__/VSelect2.spec.ts.snap
@@ -17,7 +17,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and multi select 1`] =
           </div>
           <input autocomplete="on"
                  readonly="readonly"
-                 type="text"
+                 type="hidden"
                  aria-readonly="true"
           >
         </div>
@@ -74,7 +74,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and single select 1`] =
           </div>
           <input autocomplete="on"
                  readonly="readonly"
-                 type="text"
+                 type="hidden"
                  aria-readonly="true"
           >
         </div>
@@ -131,7 +131,7 @@ exports[`VSelect.ts should use scoped slot for selection generation 1`] = `
           </div>
           <input autocomplete="on"
                  readonly="readonly"
-                 type="text"
+                 type="hidden"
                  aria-readonly="true"
           >
         </div>

diff --git a/packages/vuetify/src/components/VSelect/__tests__/__snapshots__/VSelect3.spec.ts.snap b/packages/vuetify/src/components/VSelect/__tests__/__snapshots__/VSelect3.spec.ts.snap
@@ -17,7 +17,7 @@ exports[`VSelect.ts should add color to selected index 1`] = `
           </div>
           <input autocomplete="on"
                  readonly="readonly"
-                 type="text"
+                 type="hidden"
                  aria-readonly="true"
           >
         </div>