adds name prop as pass-through attribute on certain input types

src/libs/context.js

@@ -1,4 +1,3 @@
-import nanoid from 'nanoid/non-secure'
 import { map, arrayify, shallowEqualObjects } from './utils'
 
 /**
@@ -12,6 +11,7 @@ export default {
       type: this.type,
       value: this.value,
       name: this.nameOrFallback,
+      hasGivenName: this.hasGivenName,
       classification: this.classification,
       component: this.component,
       id: this.id || this.defaultId,
@@ -32,6 +32,7 @@ export default {
   },
   // Used in sub-context
   nameOrFallback,
+  hasGivenName,
   typeContext,
   elementAttributes,
   logicalLabelPosition,
@@ -78,11 +79,17 @@ function typeContext () {
  */
 function elementAttributes () {
   const attrs = Object.assign({}, this.localAttributes)
+  // pass the ID prop through to the root element
   if (this.id) {
     attrs.id = this.id
   } else {
     attrs.id = this.defaultId
   }
+  // pass an explicitly given name prop through to the root element
+  if (this.hasGivenName) {
+    attrs.name = this.name
+  }
+
   return attrs
 }
 
@@ -153,6 +160,24 @@ function nameOrFallback () {
   return this.name
 }
 
+/**
+ * determine if an input has a user-defined name
+ */
+function hasGivenName () {
+  if (
+    this.name &&
+    typeof this.name === 'string' &&
+    !['checkbox', 'radio'].includes(this.type) &&
+    this.name !== `${this.type}_${this.id}` &&
+    this.name !== `${this.type}_${this.defaultId}` &&
+    // radio and checkbox options have their value as part of their ID so we need to filter those out too
+    this.name !== `${this.type}_${(String(this.id).replace('_' + String(this.value), ''))}`
+  ) {
+    return true
+  }
+  return false
+}
+
 /**
  * Determines if this formulate element is v-modeled or not.
  */

test/unit/FormulateInputButton.test.js

@@ -78,3 +78,8 @@ test('type "button" renders slot inside button', () => {
   })
   expect(wrapper.find('button > span').html()).toBe('<span>My custom slot</span>')
 })
+
+it('passes an explicitly given name prop through to the root element', () => {
+  const wrapper = mount(FormulateInput, { propsData: { type: 'button', name: 'foo' } })
+  expect(wrapper.find('button[name="foo"]').exists()).toBe(true)
+})

test/unit/FormulateInputFile.test.js

@@ -37,6 +37,11 @@ describe('FormulateInputFile', () => {
     expect(file.attributes('data-has-preview')).toBe('true')
   })
 
+  it('passes an explicitly given name prop through to the root element', () => {
+    const wrapper = mount(FormulateInput, { propsData: { type: 'image', name: 'foo' } })
+    expect(wrapper.find('input[name="foo"]').exists()).toBe(true)
+  })
+
   /**
    * ===========================================================================
    * Currently there appears to be no way to properly mock upload data in

test/unit/FormulateInputSelect.test.js

@@ -42,4 +42,9 @@ describe('FormulateInputSelect', () => {
     expect(options.length).toBe(1)
     expect(options.at(0).attributes('disabled')).toBeTruthy()
   })
+
+  it('passes an explicitly given name prop through to the root element', () => {
+    const wrapper = mount(FormulateInput, { propsData: { type: 'select', options: [],  name: 'foo' } })
+    expect(wrapper.find('select[name="foo"]').exists()).toBe(true)
+  })
 })

test/unit/FormulateInputSlider.test.js

@@ -25,4 +25,9 @@ describe('FormulateInputSlider', () => {
     const wrapper = mount(FormulateInput, { propsData: { type: 'range', showValue: 'true', value: '15', min: '0', max: '100' } })
     expect(wrapper.find('.formulate-input-element-range-value').text()).toBe('15')
   })
+
+  it('passes an explicitly given name prop through to the root element', () => {
+    const wrapper = mount(FormulateInput, { propsData: { type: 'range', name: 'foo' } })
+    expect(wrapper.find('input[name="foo"]').exists()).toBe(true)
+  })
 })

test/unit/FormulateInputText.test.js

@@ -83,6 +83,11 @@ describe('FormulateInputText', () => {
     expect(wrapper.find(`input[id="${wrapper.vm.context.attributes.id}"]`).exists()).toBe(true)
   })
 
+  it('passes an explicitly given name prop through to the root element', () => {
+    const wrapper = mount(FormulateInput, { propsData: { type: 'text', name: 'foo' } })
+    expect(wrapper.find('input[name="foo"]').exists()).toBe(true)
+  })
+
   it('doesn’t automatically add a label', () => {
     const wrapper = mount(FormulateInput, { propsData: { type: 'text' } })
     expect(wrapper.find('label').exists()).toBe(false)