fix(Input): replace disabled class with disabled attribute

Semantic-Org · Apr 17, 2017 · 57266d5 · 57266d5
1 parent 573a0da
commit 57266d5
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/src/elements/Input/Input.js b/src/elements/Input/Input.js
@@ -162,7 +162,6 @@ class Input extends Component {
     const classes = cx(
       'ui',
       size,
-      useKeyOnly(disabled, 'disabled'),
       useKeyOnly(error, 'error'),
       useKeyOnly(fluid, 'fluid'),
       useKeyOnly(focus, 'focus'),
@@ -184,6 +183,8 @@ class Input extends Component {
     if (onChange) htmlInputProps.onChange = this.handleChange
     htmlInputProps.ref = this.handleInputRef
 
+    if (_.has(this.props, 'disabled')) htmlInputProps.disabled = disabled
+
     // tabIndex
     if (!_.isNil(tabIndex)) htmlInputProps.tabIndex = tabIndex
     else if (disabled) htmlInputProps.tabIndex = -1

diff --git a/src/lib/htmlInputPropsUtils.js b/src/lib/htmlInputPropsUtils.js
@@ -5,12 +5,8 @@ export const htmlInputAttrs = [
   'selected', 'defaultValue', 'defaultChecked',
 
   // LIMITED HTML PROPS
-  'autoCapitalize', 'autoComplete', 'autoCorrect', 'autoFocus', 'checked', 'form', 'max', 'maxLength', 'min',
+  'autoCapitalize', 'autoComplete', 'autoCorrect', 'autoFocus', 'checked', 'disabled', 'form', 'max', 'maxLength', 'min',
   'multiple', 'name', 'pattern', 'placeholder', 'readOnly', 'required', 'step', 'type', 'value',
-
-  // Heads Up!
-  // Do not pass disabled, it duplicates the SUI CSS opacity rule.
-  // 'disabled',
 ]
 
 export const htmlInputEvents = [

diff --git a/test/specs/elements/Input/Input-test.js b/test/specs/elements/Input/Input-test.js
@@ -73,7 +73,6 @@ describe('Input', () => {
   })
 
   common.propKeyOnlyToClassName(Input, 'action')
-  common.propKeyOnlyToClassName(Input, 'disabled')
   common.propKeyOnlyToClassName(Input, 'error')
   common.propKeyOnlyToClassName(Input, 'fluid')
   common.propKeyOnlyToClassName(Input, 'focus')
@@ -204,6 +203,18 @@ describe('Input', () => {
     })
   })
 
+  describe('disabled', () => {
+    it('is applied to the underlying html input element', () => {
+      shallow(<Input disabled />)
+        .find('input')
+        .should.have.prop('disabled', true)
+
+      shallow(<Input disabled={false} />)
+        .find('input')
+        .should.have.prop('disabled', false)
+    })
+  })
+
   describe('tabIndex', () => {
     it('is not set by default', () => {
       shallow(<Input />)