Add props for setting form attribute on the input element

Author: inulty-dfe

dist/accessible-autocomplete.min.js

@@ -42,6 +42,7 @@ export default class Autocomplete extends Component {
     displayMenu: 'inline',
     minLength: 0,
     name: 'input-autocomplete',
+    form: '',
     placeholder: '',
     onConfirm: () => {},
     confirmOnBlur: true,
@@ -405,6 +406,12 @@ export default class Autocomplete extends Component {
     }
   }
 
+  setFormAttribute (element) {
+    if (element && this.props.form) {
+      element.setAttribute('form', this.props.form)
+    }
+  }
+
   render () {
     const {
       cssNamespace,
@@ -557,7 +564,10 @@ export default class Autocomplete extends Component {
           onFocus={this.handleInputFocus}
           name={name}
           placeholder={placeholder}
-          ref={(inputElement) => { this.elementReferences[-1] = inputElement }}
+          ref={(inputElement) => {
+            this.elementReferences[-1] = inputElement
+            this.setFormAttribute(inputElement)
+          }}
           type='text'
           role='combobox'
           required={required}

dist/accessible-autocomplete.min.js.map

@@ -90,6 +90,26 @@ describe('Autocomplete', () => {
         expect(inputElement.getAttribute('aria-describedby')).to.equal('autocomplete-default__assistiveHint')
       })
 
+      describe('renders with an form attribute', () => {
+        it('is not present', () => {
+          render(<Autocomplete  />, scratch)
+
+          const wrapperElement = scratch.getElementsByClassName('autocomplete__wrapper')[0]
+          const inputElement = wrapperElement.getElementsByTagName('input')[0]
+
+          expect(inputElement.getAttribute('form')).to.equal(null)
+        })
+
+        it('is not present', () => {
+          render(<Autocomplete form={'myForm'} />, scratch)
+
+          const wrapperElement = scratch.getElementsByClassName('autocomplete__wrapper')[0]
+          const inputElement = wrapperElement.getElementsByTagName('input')[0]
+
+          expect(inputElement.getAttribute('form')).to.equal('myForm')
+        })
+      })
+
       describe('renders with an aria-autocomplete attribute', () => {
         it('of value "list", when autoselect is not enabled', () => {
           render(<Autocomplete required />, scratch)

dist/lib/accessible-autocomplete.preact.min.js

@@ -336,4 +336,27 @@ describe('Wrapper', () => {
       }, 250)
     }, 250)
   })
+
+  it('does not add a form attribute by default', () => {
+    const select = injectSelectToEnhanceIntoDOM(scratch)
+
+    accessibleAutocomplete.enhanceSelectElement({
+      selectElement: select
+    })
+
+    const autocompleteInput = scratch.querySelector('.autocomplete__input')
+    expect(autocompleteInput.getAttribute('form')).to.equal(null)
+  })
+
+  it('can define a custom form for the autocomplete element', () => {
+    const select = injectSelectToEnhanceIntoDOM(scratch)
+
+    accessibleAutocomplete.enhanceSelectElement({
+      form: 'my-custom-form',
+      selectElement: select
+    })
+
+    const autocompleteInput = scratch.querySelector('.autocomplete__input')
+    expect(autocompleteInput.getAttribute('form')).to.equal('my-custom-form')
+  })
 })