Other option should hide input value when deselected, resolves #808

kevinchappell · Oct 5, 2018 · ce15088 · ce15088
1 parent d910d73
commit ce15088
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 24 deletions.
diff --git a/src/js/control/select.js b/src/js/control/select.js
@@ -101,9 +101,6 @@ export default class controlSelect extends control {
           id: `${data.id}-other`,
           className: `${data.className} other-option`,
           value: '',
-          events: {
-            click: () => this.otherOptionCB(otherOptionAttrs.id),
-          },
         }
 
         let wrapperClass = optionType
@@ -178,22 +175,6 @@ export default class controlSelect extends control {
     toggleValid()
   }
 
-  /**
-   * Callback for 'other' option.
-   * Toggles the hidden text area for "other" option.
-   * @param  {String} otherId id of the "other" option input
-   */
-  otherOptionCB(otherId) {
-    const otherInput = document.getElementById(otherId)
-    const otherInputValue = document.getElementById(`${otherId}-value`)
-
-    if (otherInput.checked) {
-      otherInputValue.style.display = 'inline-block'
-    } else {
-      otherInputValue.style.display = 'none'
-    }
-  }
-
   /**
    * onRender callback
    */

diff --git a/src/sass/_stage.scss b/src/sass/_stage.scss
@@ -320,6 +320,12 @@
     display: block;
   }
 
+  .other-option:checked + label {
+    input {
+      display: inline-block;
+    }
+  }
+
   .other-val {
     margin-left: 5px;
     display: none;

diff --git a/src/sass/base/_bs.scss b/src/sass/base/_bs.scss
@@ -72,7 +72,8 @@ textarea {
   .input-group-btn:first-child > .btn-group:not(:first-child) > .btn,
   .input-group-btn:first-child > .btn:not(:first-child),
   .input-group-btn:last-child > .btn,
-  .input-group-btn:last-child > .btn-group > .btn, .input-group-btn:last-child > .dropdown-toggle {
+  .input-group-btn:last-child > .btn-group > .btn,
+  .input-group-btn:last-child > .dropdown-toggle {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
@@ -220,10 +221,10 @@ textarea.form-control {
 
 .fb-checkbox-group {
   .checkbox,
-  .checkbox-inline{
+  .checkbox-inline {
     padding-left: 0;
     input {
-      position:relative;
+      position: relative;
       margin: 4px 0 0;
     }
     label {
@@ -233,14 +234,18 @@ textarea.form-control {
 }
 
 .fb-radio-group {
-  .radio, .radio-inline{
+  .radio,
+  .radio-inline {
     padding-left: 0;
     input {
-      position:relative;
+      position: relative;
       margin: 4px 0 0;
     }
     label {
       padding-left: 4px;
+      input[type='text'] {
+        margin-top: 0;
+      }
     }
   }
 }

diff --git a/src/sass/form-render.scss b/src/sass/form-render.scss
@@ -14,6 +14,12 @@
   color: $error;
 }
 
+.other-option:checked + label {
+  input {
+    display: inline-block;
+  }
+}
+
 .other-val {
   margin-left: 5px;
   display: none;