diff --git a/docs/zh-CN/components/form/select.md b/docs/zh-CN/components/form/select.md index 90c48ec49..bbaab206f 100755 --- a/docs/zh-CN/components/form/select.md +++ b/docs/zh-CN/components/form/select.md @@ -1261,3 +1261,70 @@ leftOptions 动态加载,默认 source 接口是返回 options 部分,而 le | reset | - | 将值重置为`resetValue`,若没有配置`resetValue`,则清空 | | reload | - | 重新加载,调用 `source`,刷新数据域数据刷新(重新加载) | | setValue | `value: string` \| `string[]` 更新的值 | 更新数据,开启`multiple`支持设置多项,开启`joinValues`时,多值用`,`分隔,否则多值用数组 | + + +### 刷新数据源 reload + +```schema: scope="body" +{ + "type": "form", + "body": [ + { + "type": "control", + "label": "点击刷新", + "mode": "horizontal", + "body": [ + { + "type": "action", + "label": "点击刷新Select数据源", + "level": "primary", + "className": "mb-2", + "onEvent": { + "click": { + "actions": [ + { + "componentId": "select_reload", + "actionType": "reload", + } + ], + "debounce": { + "wait": 200 + } + } + } + } + ] + }, + { + "name": "watchField", + "type": "input-text", + "label": "监听字段刷新", + "mode": "horizontal", + "placeholder": "输入内容刷新Select数据源", + "onEvent": { + "change": { + "actions": [ + { + "componentId": "select_reload", + "actionType": "reload", + } + ], + "debounce": { + "wait": 250 + } + } + } + }, + { + "label": "Select", + "type": "select", + "name": "select", + "id": "select_reload", + "mode": "horizontal", + "source": "/api/mock2/form/getOptions?waitSeconds=3", + "multiple": true, + "clearable": true + } + ] +} +``` diff --git a/packages/amis-ui/src/components/Select.tsx b/packages/amis-ui/src/components/Select.tsx index 6e0c538d8..55fbdc006 100644 --- a/packages/amis-ui/src/components/Select.tsx +++ b/packages/amis-ui/src/components/Select.tsx @@ -477,14 +477,19 @@ export class Select extends React.Component { @autobind open() { - this.props.disabled || - this.setState( - { - isOpen: true, - highlightedIndex: -1 - }, - () => setTimeout(this.focus, 500) - ); + const {disabled, loading} = this.props; + + if (disabled || loading) { + return; + } + + this.setState( + { + isOpen: true, + highlightedIndex: -1 + }, + () => setTimeout(this.focus, 500) + ); } @autobind @@ -505,38 +510,36 @@ export class Select extends React.Component { @autobind toggle(e?: React.MouseEvent) { + const {disabled, loading} = this.props; + if ( - e && - this.menu.current && - this.menu.current.contains(e.target as HTMLElement) + (e && + this.menu.current && + this.menu.current.contains(e.target as HTMLElement)) || + disabled || + loading ) { return; } - this.props.disabled || - this.setState( - { - isOpen: !this.state.isOpen, - highlightedIndex: -1 - }, - this.state.isOpen ? undefined : () => setTimeout(this.focus, 500) - ); + this.setState( + { + isOpen: !this.state.isOpen, + highlightedIndex: -1 + }, + this.state.isOpen ? undefined : () => setTimeout(this.focus, 500) + ); } @autobind onFocus(e: any) { - const {simpleValue} = this.props; - const {selection} = this.state; + const {simpleValue, disabled, loading} = this.props; + const {selection, isOpen} = this.state; const value = simpleValue ? selection.map(item => item.value) : selection; - this.props.disabled || - this.state.isOpen || - this.setState( - { - isFocused: true - }, - this.focus - ); + if (!disabled && !loading && !isOpen) { + this.setState({isFocused: true}, this.focus); + } this.props.onFocus && this.props.onFocus({ @@ -1345,7 +1348,7 @@ export class Select extends React.Component { [`Select--searchable`]: searchable, 'is-opened': isOpen, 'is-focused': this.state.isFocused, - 'is-disabled': disabled, + 'is-disabled': disabled || loading, 'is-mobile': mobileUI, 'is-error': hasError, [`Select--border${ucFirst(borderMode)}`]: borderMode