Merge pull request #5668 from formio/FIO-8126-select-component-trigge…

…r-on-blur

FIO-8126: Fixed select component emitting blur on click

src/Webform.unit.js

@@ -422,10 +422,10 @@ describe('Webform tests', function() {
       const blurEvent = new Event('blur');
 
       const selectChoices = form.getComponent('selectChoices');
-      selectChoices.focusableElement.dispatchEvent(focusEvent);
+      selectChoices.choices.input.element.dispatchEvent(focusEvent);
 
       setTimeout(() => {
-        selectChoices.focusableElement.dispatchEvent(blurEvent);
+        selectChoices.choices.input.element.dispatchEvent(blurEvent);
 
         const selectHtml = form.getComponent('selectHtml');
         selectHtml.refs.selectContainer.dispatchEvent(focusEvent);

src/components/select/Select.js

@@ -1,7 +1,6 @@
 import _ from 'lodash';
 import { Formio } from '../../Formio';
 import ListComponent from '../_classes/list/ListComponent';
-import Input from '../_classes/input/Input';
 import Form from '../../Form';
 import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, isSelectResourceWithObjectValue, removeHTML } from '../../utils/utils';
 
@@ -1015,7 +1014,7 @@ export default class SelectComponent extends ListComponent {
         this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());
       }
 
-      Input.prototype.addFocusBlurEvents.call(this, this.focusableElement);
+      this.addFocusBlurEvents(this.choices.input.element);
 
       if (this.itemsFromUrl && !this.component.noRefreshOnScroll) {
         this.scrollList = this.choices.choiceList.element;

src/components/select/Select.unit.js

@@ -1108,12 +1108,12 @@ describe('Select Component', () => {
     Formio.createForm(element, comp19).then(form => {
       const select = form.components[0];
       select.setValue('banana');
-      select.focusableElement.focus();
+      select.choices.input.element.focus();
       select.pristine = false;
 
       setTimeout(() => {
         assert(!select.visibleErrors.length, 'Select should be valid while changing');
-        select.focusableElement.dispatchEvent(new Event('blur'));
+        select.choices.input.element.dispatchEvent(new Event('blur'));
 
         setTimeout(() => {
           assert(select.visibleErrors.length, 'Should set error after Select component was blurred');