Fix floating label not floating when there are chips but no input or …

…focus. Fixes #259
TeamWertarbyte · Jan 23, 2019 · 4d32791 · 4d32791
1 parent af240a4
commit 4d32791
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/ChipInput.js b/src/ChipInput.js
@@ -469,7 +469,7 @@ class ChipInput extends React.Component {
     const hasInput = (this.props.value || actualInputValue).length > 0 || actualInputValue.length > 0
     const shrinkFloatingLabel = InputLabelProps.shrink != null
       ? InputLabelProps.shrink
-      : (label != null && (hasInput || this.state.isFocused))
+      : (label != null && (hasInput || this.state.isFocused || chips.length > 0))
 
     const chipComponents = chips.map((tag, i) => {
       const value = dataSourceConfig ? tag[dataSourceConfig.value] : tag
@@ -490,10 +490,7 @@ class ChipInput extends React.Component {
 
     const InputMore = {}
     if (variant === 'outlined') {
-      if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
-        InputMore.notched = InputLabelProps.shrink
-      }
-
+      InputMore.notched = shrinkFloatingLabel
       InputMore.labelWidth =
         (shrinkFloatingLabel && this.labelNode && this.labelNode.offsetWidth) ||
         0

diff --git a/src/ChipInput.spec.js b/src/ChipInput.spec.js
@@ -327,7 +327,7 @@ describe('floating label', () => {
 
   it('shrinks if there are chips', () => {
     const tree = mount(
-      <ChipInput label='Floating label' value={['foo']} />
+      <ChipInput label='Floating label' defaultValue={['asdf']} />
     )
     expect(tree.find('InputLabel').prop('shrink')).toBe(true)
   })