fix(ColorPicker): fix on-complete parameter value is not updated in time #749
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/tusimple/naive-ui/53NMmZrcTaPi5bWtqWZgmNuN76rJ |
aisen60
changed the title
src/color-picker/src/ColorPicker.tsx
Outdated
| @@ -391,7 +391,7 @@ export default defineComponent({ | |||
| } | |||
|
|
|||
| function handleComplete (pushStack: boolean = true): void { | |||
| const { value } = mergedValueRef | |||
| const { value } = uncontrolledValueRef | |||
There was a problem hiding this comment.
这个修法有点问题，造成这个现象的核心原因是原来 Input 只对 onChange 做了处理，改这里觉得哪里不太对。
There was a problem hiding this comment.
我觉得是组件 onUpdate:value 执行完后，mergedValueRef 还没来得及更新，就执行了 onComplete。我改一下😊
There was a problem hiding this comment.
我有点印象，可能和一个叫 upcomingValue 值的处理有关系。
设定那个值是因为我们要保证受控的情况下颜色光标不乱跳，因为一个值值对应一个位置，但是多个位置可以对应一个值，所以使用传统的写法光标就会跳。
跳光标的问题我在其他库里看见过，具体表现就是 HSL 的情况下没法让光标在底边上自由移动。
CHANGELOG.zh-CN.md
Outdated
| @@ -17,6 +17,7 @@ | |||
| ### Fixes | |||
|
|
|||
| - 修复 `n-dropdown` 循环渲染时点击异常 | |||
| - 修复 `n-color-picker` `on-complete` 回调参数 `value` 更新异常 | |||
There was a problem hiding this comment.
| - 修复 `n-color-picker` `on-complete` 回调参数 `value` 更新异常 | |
| - 修复 `n-color-picker` `on-complete` 回调参数 `value` 更新异常, 关闭 [#748](https://github.com/TuSimple/naive-ui/issues/748). |
CHANGELOG.en-US.md
Outdated
| @@ -17,6 +17,7 @@ | |||
| ### Fixes | |||
|
|
|||
| - Fix `n-dropdown` click exception when using v-for. | |||
| - Fix `n-color-picker` `on-complete` callback parameter `value` update error. closes [#748](https://github.com/TuSimple/naive-ui/issues/748). | |||
There was a problem hiding this comment.
| - Fix `n-color-picker` `on-complete` callback parameter `value` update error. closes [#748](https://github.com/TuSimple/naive-ui/issues/748). | |
| - Fix `n-color-picker` `on-complete` callback parameter `value` update error, closes [#748](https://github.com/TuSimple/naive-ui/issues/748). |
src/color-picker/src/ColorPicker.tsx
Outdated
| setTimeout(() => { | ||
| handleComplete() | ||
| }, 0) |
There was a problem hiding this comment.
为什么加上 setTimeout 就好了，有发现吗？
是不是 nextTick 就行？
There was a problem hiding this comment.
为什么加上 setTimeout 就好了，有发现吗？
是不是 nextTick 就行？
不好意思，太忙了，现在才回复。
是的，nextTick 就可以，不需要 setTimeout。
当输入框修改完毕后并且失去焦点时，on-complete 的回调参数依旧是上一个旧的值。出现这个原因是因为 on-complete 的回调参数 value 获取的是 mergedValueRef 这个值中的 value，而 mergedValueRef 中的 value 是通过 props 传进来的。在执行 on-complete 之前，会先执行 on-update:value，这时候 props.value 已经更新了，但 mergedValueRef 还没来得及更新，所以，on-complete 的回调参数 value 取得是上一个 mergedValueRef 中的 value。
# Conflicts: # CHANGELOG.en-US.md # CHANGELOG.zh-CN.md
close #748