fix: Remove autocomplete from inputs in Cypress UI #22102 (#22456)

packages/app/src/components/FileMatchInput.cy.tsx

@@ -24,5 +24,6 @@ describe('<FileMatchInput />', () => {
     .get('input[type=search]').should('have.value', newText)
     .clear()
     .get('@onUpdateTextSpy').should('have.been.calledWith', '')
+    .get('input[type=search]').should('have.attr', 'autocomplete', 'off')
   })
 })

packages/app/src/components/FileMatchInput.vue

@@ -3,6 +3,7 @@
     v-model="localModelValue"
     class="flex-grow p-0 text-gray-700 placeholder-gray-400 border-transparent outline-none placeholder-shown:overflow-ellipsis placeholder-shown:truncate hocus:border-transparent mr-8px"
     type="search"
+    autocomplete="off"
   >
 </template>
 

packages/app/src/runner/selector-playground/SelectorPlayground.cy.tsx

@@ -181,4 +181,10 @@ describe('SelectorPlayground', () => {
     cy.get('[data-cy="playground-print"]').blur()
     cy.get('[data-cy="selector-playground-tooltip"]').should('not.be.visible')
   })
+
+  it('ensures input autocomplete is disabled', () => {
+    mountSelectorPlayground()
+
+    cy.get('[data-cy="playground-selector"]').should('have.attr', 'autocomplete', 'off')
+  })
 })

packages/app/src/runner/selector-playground/SelectorPlayground.vue

@@ -61,6 +61,7 @@
         <input
           v-model="selector"
           autocapitalize="none"
+          autocomplete="off"
           autocorrect="off"
           spellcheck="false"
           data-cy="playground-selector"

packages/frontend-shared/src/components/Input.cy.tsx

@@ -35,4 +35,12 @@ describe('<Input/>', { viewportWidth: 400, viewportHeight: 80 }, () => {
     cy.findAllByLabelText('status').should('have.value', 'Coffee Loading')
     cy.percySnapshot('with icons')
   })
+
+  it('ensures autocomplete is disabled', () => {
+    const value = ref('')
+
+    // @ts-ignore = vModel is v-model in vue
+    cy.mount(() => <Input vModel={value.value}/>)
+    cy.get('input').should('have.attr', 'autocomplete', 'off')
+  })
 })

packages/frontend-shared/src/components/Input.vue

@@ -33,6 +33,7 @@
         :type="type"
         :spellcheck="false"
         :class="[{'text-gray-800': !hasError, 'text-error-500': hasError}]"
+        autocomplete="off"
         class="border-0 flex-1 ml-1px min-w-100px py-9px pl-2 placeholder-gray-400 text-gray-800 block disabled:bg-gray-100 disabled:text-gray-400"
         v-bind="inputAttrs"
       >