Merge pull request #130 from PanSpagetka/category-force-line-wrap

Add forced line wrap for category select
ManageIQ · Jul 9, 2019 · d5d29d9 · d5d29d9
2 parents 64b4eee + 0fef1a8
commit d5d29d9
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/src/forms/select-styles.js b/src/forms/select-styles.js
@@ -46,12 +46,15 @@ const customStyles = {
     position: 'relative',
     top: 10,
   }),
-  option: (provided, { isFocused, isSelected, isMulti }) => ({
+  option: (provided, {
+    isFocused, isSelected, isMulti, breakAll,
+  }) => ({
     ...provided,
     'background-color': isSelected ? '#0088ce' : isFocused ? '#def3ff' : '#ffffff', // eslint-disable-line no-nested-ternary
     'border-color': isSelected ? '#0088ce' : isFocused ? '#bee1f4' : 'transparent', // eslint-disable-line no-nested-ternary
     'border-style': 'solid',
     'border-width': '1px 0',
+    'word-break': breakAll ? 'break-all' : 'break-word',
     color: isSelected ? '#fff' : isFocused ? '#4d5258' : provided.color, // eslint-disable-line no-nested-ternary
     padding: '1px 10px',
     fontWeight: '400',

diff --git a/src/tagging/components/InnerComponents/TagSelector.js b/src/tagging/components/InnerComponents/TagSelector.js
@@ -48,6 +48,7 @@ class TagSelector extends React.Component {
       <Select
         id="tag_cat"
         value={val}
+        breakAll
         className="final-form-select"
         optionClassName="selected-option final-form-select-option"
         styles={customStyles}

diff --git a/src/tagging/tests/__snapshots__/tag.selector.test.js.snap b/src/tagging/tests/__snapshots__/tag.selector.test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`Tagging modifier match snapshot 1`] = `
 <StateManager
+  breakAll={true}
   className="final-form-select"
   classNamePrefix="react-select"
   clearable={false}