Bootstrap-select steals focus on form.checkValidity (line 449)

[WimWidgets]

I have a case in which the submit button of a form should stay disabled until the form is valid. In order to do this I listen for changes in input and constantly check if the form is valid with the form.checkValidity method. When using checkValidity all underlying inputs get validated. This triggers the invalid event on line 446 in bootstrap-select.js which in turn focuses the bootstrap-select button on line 449 (in the dist version).

this.$element.on('invalid', function () {
  that.$button
    .addClass('bs-invalid')
    .focus();
  [...]
});

So when I'm inserting some input in a random field and the script checks if the form is valid already, the bootstrap-select component steals focus away from the field I was working in.

See my example:
https://codepen.io/Wimski/pen/weRPVo
Start typing in the first field.

All the code I use:

$(function() {
	$('.bss').selectpicker();
	var frm = $('form');
	frm.on('input change', ':input', function() {
		toggleSubmitButton(frm);
	});
	toggleSubmitButton(frm);
	frm.find(':input').blur(); // remove bootstrap-select focus on initial check
});
function toggleSubmitButton (frm) {
	if (!frm.length) return;
	var valid = (!frm.get(0).checkValidity || frm.get(0).checkValidity());
	frm.find('button[type="submit"]').prop('disabled', !valid);
}

[WimWidgets]

@caseyjhol no reply? Nothing?

Here is an example showing the expected behavior of a select element being focused when responding to validation. See the difference between checkValidity and reportValidity/submit.
https://codepen.io/Wimski/pen/jwJwNR

It's too bad the focusing of the element lags a bit behind the invalid event, but a simple timeout can tell you a lot. So my suggestion would be to only focus the bootstrap-select button when the select element gets focused immediately after being invalidated.

[caseyjhol]

Sorry - I closed it because I just fixed in master (via 620fd5a), and will be available in the next release. Here's an example: https://codepen.io/caseyjhol/pen/MoxQwq.