feat(MultiSelect): add the ability to set a custom name attribute for the native select element

Author: mrholek

docs/content/forms/multi-select.md

@@ -226,16 +226,18 @@ You may also choose from small and large multi selects to match our similarly si
 | `cleaner`| boolean| `true` | Enables selection cleaner element. |
 | `disabled` | boolean | `false` | Toggle the disabled state for the component. |
 | `invalid` | boolean | `false` | Toggle the invalid state for the component. |
-| `options` | (boolean\|array)| `false` | List of option elements. |
-| `optionsMaxHeight` | (number\|string)| `'auto'` | Sets `max-height` of options list.	 |
-| `optionsStyle` | string| `'checkbox'` | Sets option style. |
-| `placeholder` | string| `'Select...'` | Specifies a short hint that is visible in the input. |
-| `search` | boolean| `false` | Enables search input element.	 |
-| `searchNoResultsLabel` | string| `'No results found'` | Sets the label for no results when filtering.	|
-| `selectAll` | boolean| `true` | Enables select all button.|
-| `selectAllLabel` | string| `'Select all options'` | Sets the select all button label.	 |
-| `selectionType` | string| `'tag'` | Sets the selection style.	 |
-| `selectionTypeCounterText` | string| `'item(s) selected'` | Sets the counter selection label.	|
+| `multiple` | boolean | `true` | It specifies that multiple options can be selected at once. |
+| `name` | string | `null` | Set the name attribute for the native select element. |
+| `options` | (boolean\|array) | `false` | List of option elements. |
+| `optionsMaxHeight` | (number\|string) | `'auto'` | Sets `max-height` of options list.	 |
+| `optionsStyle` | string | `'checkbox'` | Sets option style. |
+| `placeholder` | string | `'Select...'` | Specifies a short hint that is visible in the input. |
+| `search` | boolean | `false` | Enables search input element.	 |
+| `searchNoResultsLabel` | string | `'No results found'` | Sets the label for no results when filtering.	|
+| `selectAll` | boolean | `true` | Enables select all button.|
+| `selectAllLabel` | string | `'Select all options'` | Sets the select all button label.	 |
+| `selectionType` | string | `'tag'` | Sets the selection style.	 |
+| `selectionTypeCounterText` | string | `'item(s) selected'` | Sets the counter selection label.	|
 | `valid` | boolean | `false` | Toggle the valid state for the component. |
 {{< /bs-table >}}
 

js/src/multi-select.js

@@ -75,11 +75,12 @@ const Default = {
   disabled: false,
   invalid: false,
   multiple: true,
-  placeholder: 'Select...',
-  required: false,
+  name: null,
   options: false,
   optionsMaxHeight: 'auto',
   optionsStyle: 'checkbox',
+  placeholder: 'Select...',
+  required: false,
   search: false,
   searchNoResultsLabel: 'No results found',
   selectAll: true,
@@ -94,11 +95,12 @@ const DefaultType = {
   disabled: 'boolean',
   invalid: 'boolean',
   multiple: 'boolean',
-  placeholder: 'string',
-  required: 'boolean',
+  name: 'string',
   options: '(boolean|array)',
   optionsMaxHeight: '(number|string)',
   optionsStyle: 'string',
+  placeholder: 'string',
+  required: 'boolean',
   search: 'boolean',
   searchNoResultsLabel: 'string',
   selectAll: 'boolean',
@@ -448,8 +450,8 @@ class MultiSelect extends BaseComponent {
       this._updateSearch()
     }
 
-    if (this._element.id) {
-      this._element.setAttribute('name', `multi-select-${this._element.id}`)
+    if (this._config.name || this._element.id || this._element.name) {
+      this._element.setAttribute('name', (this._config.name || this._element.name || `multi-select-${this._element.id}`))
     }
 
     this._createOptionsContainer()