[tryton-commits] changeset in sao:default Label the text input and switch id on f...

[Cédric Krier]

changeset c9a672760bdf in sao:default
details: https://hg.tryton.org/sao?cmd=changeset;node=c9a672760bdf
description:
        Label the text input and switch id on focus

        This ensures that it is always the visible input that has the proper id 
and
        label.

        issue8962
        review258611002
diffstat:

 src/view/form.js |  17 +++++++++++++++--
 1 files changed, 15 insertions(+), 2 deletions(-)

diffs (54 lines):

diff -r 18aa5187ac6f -r c9a672760bdf src/view/form.js
--- a/src/view/form.js  Mon Jan 13 23:51:27 2020 +0100
+++ b/src/view/form.js  Tue Jan 14 00:00:30 2020 +0100
@@ -1570,6 +1570,17 @@
         }
     });
 
+    var switch_id = function(a, b) {
+        var a_id = a.attr('id');
+        var a_labelledby = a.attr('aria-labelledby');
+        var b_id = b.attr('id');
+        var b_labelledby = b.attr('aria-labelledby');
+        a.attr('id', b_id);
+        a.attr('aria-labelledby', b_labelledby);
+        b.attr('id', a_id);
+        b.attr('aria-labelledby', a_labelledby);
+    };
+
     var integer_input = function(input) {
         var input_text = input.clone().prependTo(input.parent());
         input_text.attr('type', 'text');
@@ -1579,12 +1590,14 @@
 
         input.hide().on('focusout', function() {
             if (input[0].checkValidity()) {
+                switch_id(input, input_text);
                 input.hide();
                 input_text.show();
             }
         });
         input_text.on('focusin', function() {
             if (!input.prop('readonly')) {
+                switch_id(input, input_text);
                 input_text.hide();
                 input.show();
                 window.setTimeout(function() {
@@ -1599,7 +1612,7 @@
         class_: 'form-integer',
         init: function(view, attributes) {
             Sao.View.Form.Integer._super.init.call(this, view, attributes);
-            this.input_text = integer_input(this.input);
+            this.input_text = this.labelled = integer_input(this.input);
             this.group.css('width', '');
             this.factor = Number(attributes.factor || 1);
         },
@@ -4478,7 +4491,7 @@
         class_: 'dict-float',
         create_widget: function() {
             Sao.View.Form.Dict.Float._super.create_widget.call(this);
-            this.input_text = integer_input(this.input);
+            this.input_text = this.labelled = integer_input(this.input);
         },
         get digits() {
             var record = this.parent_widget.record;