Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Fix focus for disabled checkbox

Browse source
This commit is contained in:
Julia Radzhabova 2021-04-13 16:54:21 +03:00
parent 9509869377
commit 66089fee9d
1 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
apps/common/main/lib/component/CheckBox.js
View file

@ -95,7 +95,7 @@ define([
value : 'unchecked', value : 'unchecked',
template : _.template('<label class="checkbox-indeterminate"><input id="<%= id %>" type="checkbox" class="checkbox__native">' + template : _.template('<label class="checkbox-indeterminate"><input id="<%= id %>" type="checkbox" class="checkbox__native">' +
'<label for="<%= id %>" class="checkbox__shape"></label><span><%= labelText %></span></label>'), '<label for="<%= id %>" class="checkbox__shape"></label><span></span></label>'),
initialize : function(options) { initialize : function(options) {
Common.UI.BaseView.prototype.initialize.call(this, options); Common.UI.BaseView.prototype.initialize.call(this, options);
@ -108,7 +108,6 @@ define([
var me = this; var me = this;
if (!me.rendered) { if (!me.rendered) {
var elem = this.template({ var elem = this.template({
labelText: this.options.labelText,
id: Common.UI.getId('chb-') id: Common.UI.getId('chb-')
}); });
if (parentEl) { if (parentEl) {
@ -120,6 +119,7 @@ define([
this.$chk = me.$el.find('input[type=checkbox]'); this.$chk = me.$el.find('input[type=checkbox]');
this.$label = me.$el.find('label.checkbox-indeterminate'); this.$label = me.$el.find('label.checkbox-indeterminate');
this.$span = me.$label.find('span');
this.$chk.on('click', this.onItemCheck.bind(this)); this.$chk.on('click', this.onItemCheck.bind(this));
this.$label.on('keydown', this.onKeyDown.bind(this)); this.$label.on('keydown', this.onKeyDown.bind(this));
@ -132,6 +132,8 @@ define([
if (this.options.value!==undefined) if (this.options.value!==undefined)
this.setValue(this.options.value, true); this.setValue(this.options.value, true);
this.setCaption(this.options.labelText);
// handle events // handle events
return this; return this;
}, },
@ -144,6 +146,12 @@ define([
if (disabled !== this.disabled) { if (disabled !== this.disabled) {
this.$label.toggleClass('disabled', disabled); this.$label.toggleClass('disabled', disabled);
(disabled) ? this.$chk.attr({disabled: disabled}) : this.$chk.removeAttr('disabled'); (disabled) ? this.$chk.attr({disabled: disabled}) : this.$chk.removeAttr('disabled');
if (disabled) {
this.tabindex = this.$label.attr('tabindex');
this.$label.attr('tabindex', -1);
} else if (this.tabindex) {
this.$label.attr('tabindex', this.tabindex);
}
} }
this.disabled = disabled; this.disabled = disabled;
@ -194,7 +202,8 @@ define([
}, },
setCaption: function(text) { setCaption: function(text) {
this.$label.find('span').text(text); this.$span.text(text);
this.$span.css('visibility', text ? 'visible' : 'hidden');
}, },
onKeyDown: function(e) { onKeyDown: function(e) {