Inputs now always supply a <label> tag with a special CSS class for hiding NULL labels

This helps to simplify the updating logic on the client

R/input-checkboxgroup.R

@@ -94,7 +94,7 @@ checkboxGroupInput <- function(inputId, label, choices = NULL, selected = NULL,
   tags$div(id = inputId,
     style = if (!is.null(width)) paste0("width: ", validateCssUnit(width), ";"),
     class = divClass,
-    controlLabel(inputId, label),
+    shinyInputLabel(inputId, label, control = TRUE),
     options
   )
 }

R/input-date.R

@@ -78,7 +78,7 @@
 #'
 #'   # Disable Mondays and Tuesdays.
 #'   dateInput("date7", "Date:", daysofweekdisabled = c(1,2)),
-#'   
+#'
 #'   # Disable specific dates.
 #'   dateInput("date8", "Date:", value = "2012-02-29",
 #'             datesdisabled = c("2012-03-01", "2012-03-02"))
@@ -107,7 +107,7 @@ dateInput <- function(inputId, label, value = NULL, min = NULL, max = NULL,
     class = "shiny-date-input form-group shiny-input-container",
     style = if (!is.null(width)) paste0("width: ", validateCssUnit(width), ";"),
 
-    controlLabel(inputId, label),
+    shinyInputLabel(inputId, label, control = TRUE),
     tags$input(type = "text",
                class = "form-control",
                `data-date-language` = language,

R/input-daterange.R

@@ -92,7 +92,7 @@ dateRangeInput <- function(inputId, label, start = NULL, end = NULL,
       class = "shiny-date-range-input form-group shiny-input-container",
       style = if (!is.null(width)) paste0("width: ", validateCssUnit(width), ";"),
 
-      controlLabel(inputId, label),
+      shinyInputLabel(inputId, label, control = TRUE),
       # input-daterange class is needed for dropdown behavior
       div(class = "input-daterange input-group",
         tags$input(

R/input-file.R

@@ -103,7 +103,7 @@ fileInput <- function(inputId, label, multiple = FALSE, accept = NULL,
 
   div(class = "form-group shiny-input-container",
     style = if (!is.null(width)) paste0("width: ", validateCssUnit(width), ";"),
-    label %AND% tags$label(label),
+    shinyInputLabel(inputId, label),
 
     div(class = "input-group",
       tags$label(class = "input-group-btn",

R/input-numeric.R

@@ -42,7 +42,7 @@ numericInput <- function(inputId, label, value, min = NA, max = NA, step = NA,
 
   div(class = "form-group shiny-input-container",
     style = if (!is.null(width)) paste0("width: ", validateCssUnit(width), ";"),
-    label %AND% tags$label(label, `for` = inputId),
+    shinyInputLabel(inputId, label),
     inputTag
   )
 }

R/input-password.R

@@ -30,7 +30,7 @@ passwordInput <- function(inputId, label, value = "", width = NULL,
                           placeholder = NULL) {
   div(class = "form-group shiny-input-container",
     style = if (!is.null(width)) paste0("width: ", validateCssUnit(width), ";"),
-    label %AND% tags$label(label, `for` = inputId),
+    shinyInputLabel(inputId, label),
     tags$input(id = inputId, type="password", class="form-control", value=value,
                placeholder = placeholder)
   )

R/input-radiobuttons.R

@@ -102,7 +102,7 @@ radioButtons <- function(inputId, label, choices = NULL, selected = NULL,
   tags$div(id = inputId,
     style = if (!is.null(width)) paste0("width: ", validateCssUnit(width), ";"),
     class = divClass,
-    controlLabel(inputId, label),
+    shinyInputLabel(inputId, label, control = TRUE),
     options
   )
 }

R/input-select.R

@@ -105,7 +105,7 @@ selectInput <- function(inputId, label, choices, selected = NULL,
   res <- div(
     class = "form-group shiny-input-container",
     style = if (!is.null(width)) paste0("width: ", validateCssUnit(width), ";"),
-    controlLabel(inputId, label),
+    shinyInputLabel(inputId, label, control = TRUE),
     div(selectTag)
   )
 

R/input-slider.R

@@ -172,7 +172,7 @@ sliderInput <- function(inputId, label, min, max, value, step = NULL,
 
   sliderTag <- div(class = "form-group shiny-input-container",
     style = if (!is.null(width)) paste0("width: ", validateCssUnit(width), ";"),
-    if (!is.null(label)) controlLabel(inputId, label),
+    shinyInputLabel(inputId, label, control = TRUE),
     do.call(tags$input, sliderProps)
   )
 

R/input-text.R

@@ -36,7 +36,7 @@ textInput <- function(inputId, label, value = "", width = NULL,
 
   div(class = "form-group shiny-input-container",
     style = if (!is.null(width)) paste0("width: ", validateCssUnit(width), ";"),
-    label %AND% tags$label(label, `for` = inputId),
+    shinyInputLabel(inputId, label),
     tags$input(id = inputId, type="text", class="form-control", value=value,
       placeholder = placeholder)
   )

R/input-textarea.R

@@ -55,7 +55,7 @@ textAreaInput <- function(inputId, label, value = "", width = NULL, height = NUL
   if (length(style) == 0) style <- NULL
 
   div(class = "form-group shiny-input-container",
-    label %AND% tags$label(label, `for` = inputId),
+    shinyInputLabel(inputId, label),
     tags$textarea(
       id = inputId,
       class = "form-control",

R/input-utils.R

@@ -1,5 +1,13 @@
-controlLabel <- function(controlName, label) {
-  label %AND% tags$label(class = "control-label", `for` = controlName, label)
+shinyInputLabel <- function(inputId, label = NULL, control = FALSE) {
+  classes <- c(
+    if (is.null(label)) "shiny-label-null",
+    if (control) "control-label"
+  )
+  tags$label(
+    label,
+    `for` = inputId,
+    class = if (!is.null(classes)) paste(classes, collapse = " ")
+  )
 }
 
 # This function takes in either a list or vector for `choices` (and

inst/www/shared/shiny.css

@@ -216,6 +216,10 @@ pre.shiny-text-output {
   font-size: 80%;
 }
 
+.shiny-label-null {
+  display: none;
+}
+
 .crosshair {
   cursor: crosshair;
 }

inst/www/shared/shiny.js

@@ -321,31 +321,21 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
     if (op === "==") return diff === 0;else if (op === ">=") return diff >= 0;else if (op === ">") return diff > 0;else if (op === "<=") return diff <= 0;else if (op === "<") return diff < 0;else throw "Unknown operator: " + op;
   };
 
-  function updateLabel(labelTxt, labelNode, labelHTML, insertBeforeEl) {
+  function updateLabel(labelTxt, labelNode) {
     // Only update if label was specified in the update method
     if (typeof labelTxt === "undefined") return;
+    if (labelNode.length !== 1) {
+      throw new Error("labelNode must be of length 1");
+    }
 
-    // Should the label node exist?
-    var labelEmpty = $.isArray(labelTxt) && labelTxt.length === 0;
+    // Should the label be empty?
+    var emptyLabel = $.isArray(labelTxt) && labelTxt.length === 0;
 
-    // Does the label node already exist?
-    var labelNode = labelNode || [];
-    var labelNodeExists = labelNode.length > 0;
-
-    if (labelNodeExists) {
-
-      if (labelEmpty) {
-        labelNode.remove();
-      } else {
-        labelNode.text(labelTxt);
-      }
+    if (emptyLabel) {
+      labelNode.addClass("shiny-label-null");
     } else {
-
-      if (!labelEmpty) {
-        // Some labels are actually spans
-        var newLabelNode = $(labelHTML).text(labelTxt);
-        newLabelNode.insertBefore(insertBeforeEl);
-      }
+      labelNode.text(labelTxt);
+      labelNode.removeClass("shiny-label-null");
     }
   }
 
@@ -4354,10 +4344,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
     receiveMessage: function receiveMessage(el, data) {
       if (data.hasOwnProperty('value')) this.setValue(el, data.value);
 
-      var escape_id = $escape(el.id);
-      var labelNode = $(el).parent().find('label[for="' + escape_id + '"]');
-      var labelTemplate = "<label for='" + escape_id + "'></label>";
-      updateLabel(data.label, labelNode, labelTemplate, el);
+      updateLabel(data.label, this._getLabelNode(el));
 
       if (data.hasOwnProperty('placeholder')) el.placeholder = data.placeholder;
 
@@ -4365,7 +4352,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
     },
     getState: function getState(el) {
       return {
-        label: $(el).parent().find('label[for="' + $escape(el.id) + '"]').text(),
+        label: this._getLabelNode().text(),
         value: el.value,
         placeholder: el.placeholder
       };
@@ -4375,6 +4362,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
         policy: 'debounce',
         delay: 250
       };
+    },
+    _getLabelNode: function _getLabelNode(el) {
+      return $(el).parent().find('label[for="' + $escape(el.id) + '"]');
     }
   });
   inputBindings.register(textInputBinding, 'shiny.textInput');
@@ -4430,19 +4420,19 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
       if (data.hasOwnProperty('max')) el.max = data.max;
       if (data.hasOwnProperty('step')) el.step = data.step;
 
-      var escape_id = $escape(el.id);
-      var labelNode = $(el).parent().find('label[for="' + escape_id + '"]');
-      var labelHTML = "<label for='" + escape_id + "'></label>";
-      updateLabel(data.label, labelNode, labelHTML, el);
+      updateLabel(data.label, this._getLabelNode(el));
 
       $(el).trigger('change');
     },
     getState: function getState(el) {
-      return { label: $(el).parent().find('label[for="' + $escape(el.id) + '"]').text(),
+      return { label: this._getLabelNode(el).text(),
         value: this.getValue(el),
         min: Number(el.min),
         max: Number(el.max),
         step: Number(el.step) };
+    },
+    _getLabelNode: function _getLabelNode(el) {
+      return $(el).parent().find('label[for="' + $escape(el.id) + '"]');
     }
   });
   inputBindings.register(numberInputBinding, 'shiny.numberInput');
@@ -4815,7 +4805,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
       if (startview === 2) startview = 'decade';else if (startview === 1) startview = 'year';else if (startview === 0) startview = 'month';
 
       return {
-        label: $el.find('label[for="' + $escape(el.id) + '"]').text(),
+        label: this._getLabelNode(el).text(),
         value: this.getValue(el),
         valueString: $input.val(),
         min: min,
@@ -4829,10 +4819,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
     receiveMessage: function receiveMessage(el, data) {
       var $input = $(el).find('input');
 
-      var escape_id = $escape(el.id);
-      var labelNode = $(el).find('label[for="' + escape_id + '"]');
-      var labelTemplate = "<label for='" + escape_id + "'></label>";
-      updateLabel(data.label, labelNode, labelTemplate, $input);
+      updateLabel(data.label, this._getLabelNode(el));
 
       if (data.hasOwnProperty('min')) this._setMin($input[0], data.min);
 
@@ -4887,6 +4874,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
         this._setMax($input[0], $input.data('max-date'));
       }
     },
+    _getLabelNode: function _getLabelNode(el) {
+      return $(el).find('label[for="' + $escape(el.id) + '"]');
+    },
     // Given a format object from a date picker, return a string
     _formatToString: function _formatToString(format) {
       // Format object has structure like:
@@ -5033,7 +5023,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
       if (startview === 2) startview = 'decade';else if (startview === 1) startview = 'year';else if (startview === 0) startview = 'month';
 
       return {
-        label: $el.find('label[for="' + $escape(el.id) + '"]').text(),
+        label: this._getLabelNode(el).text(),
         value: this.getValue(el),
         valueString: [$startinput.val(), $endinput.val()],
         min: min,
@@ -5050,10 +5040,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
       var $startinput = $inputs.eq(0);
       var $endinput = $inputs.eq(1);
 
-      var escape_id = $escape(el.id);
-      var labelNode = $el.find('label[for="' + escape_id + '"]');
-      var labelHTML = "<label for='" + escape_id + "'></label>";
-      updateLabel(data.label, labelNode, labelHTML, el);
+      updateLabel(data.label, this._getLabelNode(el));
 
       if (data.hasOwnProperty('min')) {
         this._setMin($startinput[0], data.min);
@@ -5109,6 +5096,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
     },
     unsubscribe: function unsubscribe(el) {
       $(el).off('.dateRangeInputBinding');
+    },
+    _getLabelNode: function _getLabelNode(el) {
+      return $(el).find('label[for="' + $escape(el.id) + '"]');
     }
   });
   inputBindings.register(dateRangeInputBinding, 'shiny.dateRangeInput');
@@ -5158,7 +5148,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
       }
 
       return {
-        label: $(el).parent().find('label[for="' + $escape(el.id) + '"]').text(),
+        label: this._getLabelNode(el),
         value: this.getValue(el),
         options: options
       };
@@ -5240,13 +5230,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
         this.setValue(el, data.value);
       }
 
-      var escaped_id = $escape(el.id);
-      if (this._is_selectize(el)) {
-        escaped_id += "-selectized";
-      }
-      var labelNode = $(el).parent().parent().find('label[for="' + escaped_id + '"]');
-      var labelHTML = "<label for='" + escaped_id + "'></label>";
-      updateLabel(data.label, labelNode, labelHTML, el);
+      updateLabel(data.label, this._getLabelNode(el));
 
       $(el).trigger('change');
     },
@@ -5269,6 +5253,13 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
     initialize: function initialize(el) {
       this._selectize(el);
     },
+    _getLabelNode: function _getLabelNode(el) {
+      var escaped_id = $escape(el.id);
+      if (this._is_selectize(el)) {
+        escaped_id += "-selectized";
+      }
+      return $(el).parent().parent().find('label[for="' + escaped_id + '"]');
+    },
     // Return true if it's a selectize input, false if it's a regular select input.
     _is_selectize: function _is_selectize(el) {
       var config = $(el).parent().find('script[data-for="' + $escape(el.id) + '"]');
@@ -5346,7 +5337,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
       }
 
       return {
-        label: $(el).parent().find('label[for="' + $escape(el.id) + '"]').text(),
+        label: this._getLabelNode(el).text(),
         value: this.getValue(el),
         options: options
       };
@@ -5365,10 +5356,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
       if (data.hasOwnProperty('value')) this.setValue(el, data.value);
 
-      var escape_id = $escape(el.id);
-      var labelNode = $(el).parent().find('label[for="' + $escape(el.id) + '"]');
-      var labelHTML = "<label for='" + escape_id + "'></label>";
-      updateLabel(data.label, labelNode, labelHTML, el);
+      updateLabel(data.label, this._getLabelNode(el));
 
       $(el).trigger('change');
     },
@@ -5380,6 +5368,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
     unsubscribe: function unsubscribe(el) {
       $(el).off('.radioInputBinding');
     },
+    // Get the DOM element that contains the top-level label
+    _getLabelNode: function _getLabelNode(el) {
+      return $(el).parent().find('label[for="' + $escape(el.id) + '"]');
+    },
     // Given an input DOM object, get the associated label. Handles labels
     // that wrap the input as well as labels associated with 'for' attribute.
     _getLabel: function _getLabel(obj) {
@@ -5445,7 +5437,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
           label: this._getLabel($objs[i]) };
       }
 
-      return { label: $(el).find('label[for="' + $escape(el.id) + '"]').text(),
+      return { label: this._getLabelNode(el).text(),
         value: this.getValue(el),
         options: options
       };
@@ -5464,10 +5456,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
       if (data.hasOwnProperty('value')) this.setValue(el, data.value);
 
-      var escape_id = $escape(el.id);
-      var labelNode = $(el).find('label[for="' + escape_id + '"]');
-      var labelHTML = "<label for='" + escape_id + "'></label>";
-      updateLabel(data.label, labelNode, labelHTML, $el.find(".shiny-options-group"));
+      updateLabel(data.label, this._getLabelNode(el));
 
       $(el).trigger('change');
     },
@@ -5479,6 +5468,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
     unsubscribe: function unsubscribe(el) {
       $(el).off('.checkboxGroupInputBinding');
     },
+    // Get the DOM element that contains the top-level label
+    _getLabelNode: function _getLabelNode(el) {
+      return $(el).find('label[for="' + $escape(el.id) + '"]');
+    },
     // Given an input DOM object, get the associated label. Handles labels
     // that wrap the input as well as labels associated with 'for' attribute.
     _getLabel: function _getLabel(obj) {

srcjs/input_binding_checkboxgroup.js

@@ -39,7 +39,7 @@ $.extend(checkboxGroupInputBinding, {
                      label:   this._getLabel($objs[i]) };
     }
 
-    return { label:    $(el).find('label[for="' + $escape(el.id) + '"]').text(),
+    return { label:    this._getLabelNode(el).text(),
              value:    this.getValue(el),
              options:  options
            };
@@ -59,10 +59,7 @@ $.extend(checkboxGroupInputBinding, {
     if (data.hasOwnProperty('value'))
       this.setValue(el, data.value);
 
-    var escape_id = $escape(el.id);
-    var labelNode = $(el).find('label[for="' + escape_id + '"]');
-    var labelHTML = "<label for='" + escape_id + "'></label>";
-    updateLabel(data.label, labelNode, labelHTML, $el.find(".shiny-options-group"));
+    updateLabel(data.label, this._getLabelNode(el));
 
     $(el).trigger('change');
   },
@@ -74,6 +71,10 @@ $.extend(checkboxGroupInputBinding, {
   unsubscribe: function(el) {
     $(el).off('.checkboxGroupInputBinding');
   },
+  // Get the DOM element that contains the top-level label
+  _getLabelNode: function(el) {
+      return $(el).find('label[for="' + $escape(el.id) + '"]');
+  },
   // Given an input DOM object, get the associated label. Handles labels
   // that wrap the input as well as labels associated with 'for' attribute.
   _getLabel: function(obj) {

srcjs/input_binding_date.js

@@ -46,7 +46,7 @@ $.extend(dateInputBinding, {
     else if (startview === 0)  startview = 'month';
 
     return {
-      label:       $el.find('label[for="' + $escape(el.id) + '"]').text(),
+      label:       this._getLabelNode(el).text(),
       value:       this.getValue(el),
       valueString: $input.val(),
       min:         min,
@@ -60,11 +60,7 @@ $.extend(dateInputBinding, {
   receiveMessage: function(el, data) {
     var $input = $(el).find('input');
 
-
-    var escape_id = $escape(el.id);
-    var labelNode = $(el).find('label[for="' + escape_id + '"]');
-    var labelTemplate = "<label for='" + escape_id + "'></label>";
-    updateLabel(data.label, labelNode, labelTemplate, $input);
+    updateLabel(data.label, this._getLabelNode(el));
 
     if (data.hasOwnProperty('min'))
       this._setMin($input[0], data.min);
@@ -122,6 +118,9 @@ $.extend(dateInputBinding, {
       this._setMax($input[0], $input.data('max-date'));
     }
   },
+  _getLabelNode: function(el) {
+    return $(el).find('label[for="' + $escape(el.id) + '"]');
+  },
   // Given a format object from a date picker, return a string
   _formatToString: function(format) {
     // Format object has structure like:

srcjs/input_binding_daterange.js

@@ -63,7 +63,7 @@ $.extend(dateRangeInputBinding, dateInputBinding, {
     else if (startview === 0)  startview = 'month';
 
     return {
-      label:       $el.find('label[for="' + $escape(el.id) + '"]').text(),
+      label:       this._getLabelNode(el).text(),
       value:       this.getValue(el),
       valueString: [ $startinput.val(), $endinput.val() ],
       min:         min,
@@ -80,10 +80,7 @@ $.extend(dateRangeInputBinding, dateInputBinding, {
     var $startinput = $inputs.eq(0);
     var $endinput   = $inputs.eq(1);
 
-    var escape_id = $escape(el.id);
-    var labelNode = $el.find('label[for="' + escape_id + '"]');
-    var labelHTML = "<label for='" + escape_id + "'></label>";
-    updateLabel(data.label, labelNode, labelHTML, el);
+    updateLabel(data.label, this._getLabelNode(el));
 
     if (data.hasOwnProperty('min')) {
       this._setMin($startinput[0], data.min);
@@ -142,6 +139,9 @@ $.extend(dateRangeInputBinding, dateInputBinding, {
   },
   unsubscribe: function(el) {
     $(el).off('.dateRangeInputBinding');
-  }
+  },
+  _getLabelNode: function(el) {
+    return $(el).find('label[for="' + $escape(el.id) + '"]');
+  },
 });
 inputBindings.register(dateRangeInputBinding, 'shiny.dateRangeInput');

srcjs/input_binding_number.js

@@ -24,20 +24,19 @@ $.extend(numberInputBinding, textInputBinding, {
     if (data.hasOwnProperty('max'))    el.max   = data.max;
     if (data.hasOwnProperty('step'))   el.step  = data.step;
 
-
-    var escape_id = $escape(el.id);
-    var labelNode = $(el).parent().find('label[for="' + escape_id + '"]');
-    var labelHTML = "<label for='" + escape_id + "'></label>";
-    updateLabel(data.label, labelNode, labelHTML, el);
+    updateLabel(data.label, this._getLabelNode(el));
 
     $(el).trigger('change');
   },
   getState: function(el) {
-    return { label: $(el).parent().find('label[for="' + $escape(el.id) + '"]').text(),
+    return { label: this._getLabelNode(el).text(),
              value: this.getValue(el),
              min:   Number(el.min),
              max:   Number(el.max),
              step:  Number(el.step) };
+  },
+  _getLabelNode: function(el) {
+    return $(el).parent().find('label[for="' + $escape(el.id) + '"]');
   }
 });
 inputBindings.register(numberInputBinding, 'shiny.numberInput');

srcjs/input_binding_radio.js

@@ -21,7 +21,7 @@ $.extend(radioInputBinding, {
     }
 
     return {
-      label:    $(el).parent().find('label[for="' + $escape(el.id) + '"]').text(),
+      label:    this._getLabelNode(el).text(),
       value:    this.getValue(el),
       options:  options
     };
@@ -41,10 +41,7 @@ $.extend(radioInputBinding, {
     if (data.hasOwnProperty('value'))
       this.setValue(el, data.value);
 
-    var escape_id = $escape(el.id);
-    var labelNode = $(el).parent().find('label[for="' + $escape(el.id) + '"]');
-    var labelHTML = "<label for='" + escape_id + "'></label>";
-    updateLabel(data.label, labelNode, labelHTML, el);
+    updateLabel(data.label, this._getLabelNode(el));
 
     $(el).trigger('change');
   },
@@ -56,6 +53,10 @@ $.extend(radioInputBinding, {
   unsubscribe: function(el) {
     $(el).off('.radioInputBinding');
   },
+  // Get the DOM element that contains the top-level label
+  _getLabelNode: function(el) {
+      return $(el).parent().find('label[for="' + $escape(el.id) + '"]');
+  },
   // Given an input DOM object, get the associated label. Handles labels
   // that wrap the input as well as labels associated with 'for' attribute.
   _getLabel: function(obj) {

srcjs/input_binding_select.js

@@ -40,7 +40,7 @@ $.extend(selectInputBinding, {
     }
 
     return {
-      label: $(el).parent().find('label[for="' + $escape(el.id) + '"]').text(),
+      label:    this._getLabelNode(el),
       value:    this.getValue(el),
       options:  options
     };
@@ -123,14 +123,7 @@ $.extend(selectInputBinding, {
       this.setValue(el, data.value);
     }
 
-    let escaped_id = $escape(el.id);
-    if (this._is_selectize(el)) {
-      escaped_id += "-selectized";
-    }
-    var labelNode = $(el).parent().parent()
-      .find('label[for="' + escaped_id + '"]');
-    var labelHTML = "<label for='" + escaped_id + "'></label>";
-    updateLabel(data.label, labelNode, labelHTML, el);
+    updateLabel(data.label, this._getLabelNode(el));
 
     $(el).trigger('change');
   },
@@ -151,6 +144,13 @@ $.extend(selectInputBinding, {
   initialize: function(el) {
     this._selectize(el);
   },
+  _getLabelNode: function(el) {
+    let escaped_id = $escape(el.id);
+    if (this._is_selectize(el)) {
+      escaped_id += "-selectized";
+    }
+    return $(el).parent().parent().find('label[for="' + escaped_id + '"]');
+  },
   // Return true if it's a selectize input, false if it's a regular select input.
   _is_selectize: function(el) {
     var config = $(el).parent().find('script[data-for="' + $escape(el.id) + '"]');

srcjs/input_binding_text.js

@@ -27,10 +27,7 @@ $.extend(textInputBinding, {
     if (data.hasOwnProperty('value'))
       this.setValue(el, data.value);
 
-    var escape_id = $escape(el.id);
-    var labelNode = $(el).parent().find('label[for="' + escape_id + '"]');
-    var labelTemplate = "<label for='" + escape_id + "'></label>";
-    updateLabel(data.label, labelNode, labelTemplate, el);
+    updateLabel(data.label, this._getLabelNode(el));
 
     if (data.hasOwnProperty('placeholder'))
       el.placeholder = data.placeholder;
@@ -39,7 +36,7 @@ $.extend(textInputBinding, {
   },
   getState: function(el) {
     return {
-      label: $(el).parent().find('label[for="' + $escape(el.id) + '"]').text(),
+      label: this._getLabelNode().text(),
       value: el.value,
       placeholder: el.placeholder
     };
@@ -49,6 +46,9 @@ $.extend(textInputBinding, {
       policy: 'debounce',
       delay: 250
     };
+  },
+  _getLabelNode: function(el) {
+    return $(el).parent().find('label[for="' + $escape(el.id) + '"]');
   }
 });
 inputBindings.register(textInputBinding, 'shiny.textInput');

srcjs/utils.js

@@ -328,33 +328,21 @@ exports.compareVersion = function(a, op, b) {
 };
 
 
-function updateLabel(labelTxt, labelNode, labelHTML, insertBeforeEl) {
+function updateLabel(labelTxt, labelNode) {
   // Only update if label was specified in the update method
   if (typeof labelTxt === "undefined") return;
+  if (labelNode.length !== 1) {
+    throw new Error("labelNode must be of length 1");
+  }
 
-  // Should the label node exist?
-  var labelEmpty = $.isArray(labelTxt) && labelTxt.length === 0;
-
-  // Does the label node already exist?
-  var labelNode = labelNode || [];
-  var labelNodeExists = labelNode.length > 0;
-
-  if (labelNodeExists) {
-
-    if (labelEmpty) {
-      labelNode.remove();
-    } else {
-      labelNode.text(labelTxt);
-    }
+  // Should the label be empty?
+  var emptyLabel = $.isArray(labelTxt) && labelTxt.length === 0;
 
+  if (emptyLabel) {
+    labelNode.addClass("shiny-label-null");
   } else {
-
-    if (!labelEmpty) {
-      // Some labels are actually spans
-      var newLabelNode = $(labelHTML).text(labelTxt);
-      newLabelNode.insertBefore(insertBeforeEl);
-    }
-
+    labelNode.text(labelTxt);
+    labelNode.removeClass("shiny-label-null");
   }
 
 }