Merge pull request #739 from XiaoMi/hotfix/#721

fix: fix #721
XiaoMi · Oct 24, 2019 · 22b645d · 22b645d
2 parents f362141 + 6d05d71
commit 22b645d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/components/cascader/Cascader.js b/components/cascader/Cascader.js
@@ -47,7 +47,7 @@ class Cascader extends Component {
     const cascaderValue = this.props.value
     const cacheValue = this.props.value
     const cascaderLabel = this.getCascaderLabel(cascaderValue)
-
+    this.hiCascader = React.createRef()
     this.debouncedKeywordChange = debounce(this.onKeywordChange.bind(this), 300)
     this.clickOutsideHandel = this.clickOutside.bind(this)
     this.state = {
@@ -183,7 +183,7 @@ class Cascader extends Component {
     } = this.state
     if (!keyword) {
       this.setState({
-        filterOptions: data
+        filterOptions: false
       })
       return
     }
@@ -333,9 +333,8 @@ class Cascader extends Component {
     }
     const expandIcon = popperShow ? 'icon-up' : 'icon-down'
     const placeholder = cascaderLabel || this.localeDatasProps('placeholder')
-
     return (
-      <div className={classNames('hi-cascader', className, extraClass)} style={style}>
+      <div className={classNames('hi-cascader', className, extraClass)} style={style} ref={this.hiCascader}>
         <div className='hi-cascader__input-container' ref={node => { this.inputContainer = node }} onClick={this.handleClick.bind(this)}>
           <input
             ref={node => {
@@ -371,6 +370,8 @@ class Cascader extends Component {
             value={cascaderValue}
             options={filterOptions || data}
             root={() => this}
+            isFiltered={filterOptions}
+            filterOptionWidth={this.hiCascader.current && this.hiCascader.current.clientWidth}
             onSelect={this.onChangeValue.bind(this)}
           />
         </Popper>

diff --git a/components/cascader/Menu.js b/components/cascader/Menu.js
@@ -26,7 +26,9 @@ class Menu extends Component {
     const {
       value,
       options,
-      onSelect
+      onSelect,
+      isFiltered,
+      filterOptionWidth
     } = this.props
     const root = this.root()
     const menus = []
@@ -42,7 +44,7 @@ class Menu extends Component {
       currentOptions = false
 
       menus.push(
-        <ul className='hi-cascader-menu' key={deep}>
+        <ul className='hi-cascader-menu' key={deep} style={{width: isFiltered ? filterOptionWidth : 'auto'}}>
           {
             _currentOptions.length === 0 &&
             <Loading size='small' />