Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 修复select下点击拖出后无法输入值问题，对应issue510 #672

Closed
wants to merge 1 commit into from
Closed

fix: 修复select下点击拖出后无法输入值问题，对应issue510 #672

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions src/select/src/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,6 +332,7 @@ export default defineComponent({
const { nTriggerFormBlur } = formItem
if (onBlur) call(onBlur, e)
nTriggerFormBlur()
triggerRef.value?.blurInput()
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

预期中 doBlur 是没有副作用的，这个能挪到别的地方吗？

}
function doFocus (e: FocusEvent): void {
const { onFocus } = props
Expand Down Expand Up @@ -419,12 +420,13 @@ export default defineComponent({
closeMenu()
}
function handleMenuClickOutside (e: MouseEvent): void {
if (mergedShowRef.value) {
if (!triggerRef.value?.$el.contains(e.target as Node)) {
// outside select, don't need to return focus
closeMenu()
}
// if (mergedShowRef.value) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

能解释一下这么改的影响吗？我没太理解出现 bug 时候发生了啥

Copy link
Author

@labbomb labbomb Jul 27, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

问题是你选中一个元素后，点击该元素按住不放，拖到框以外的部分，就没法输值了
解决方法，在你点击松开时把input和外层包的这个的焦点事件全部失焦，让用户重新去点击选择
这样改暂时没发现有别的影响，功能是正常的

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这样不是很符合预期，预期是如果原先 focus，拖出去应该继续 focus。

和原生 input 的行为是预期的行为。

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

在我看来，当你选中移出框外，已经是在外部了，相当于你点击了弹框外，此时应该属于失焦状态而不是继续focus

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

你试试浏览器的原生 input 和 select，行为和你的描述是不一致的。我们尽量还是维持 native 相同的行为，除非办不到。

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

那么现在，我是不是应该反向操作一下，保证focus即可，按照这个去改动一下

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我感觉关键是找到原先出错的原因。我们预期是拖动到外面的过程不要重新 focus 或者 blur，而只是能继续操作。

我之前没有找到出现这个现象的具体原因。

if (!triggerRef.value?.$el.contains(e.target as Node)) {
// outside select, don't need to return focus
handleTriggerBlur(e)
closeMenu()
}
// }
}
function createClearedMultipleSelectValue (
value: string | number | Array<string | number> | null
Expand Down