fix: interacting with footer components closes the date selection panel #683
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Codecov Report
@@ Coverage Diff @@
## master #683 +/- ##
=======================================
Coverage 98.94% 98.94%
=======================================
Files 56 56
Lines 2457 2460 +3
Branches 734 735 +1
=======================================
+ Hits 2431 2434 +3
Misses 24 24
Partials 2 2
📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more |
|
目前还有一些问题： |
| @@ -326,6 +327,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) { | |||
| const [inputProps, { focused, typing }] = usePickerInput({ | |||
| blurToCancel: needConfirmButton, | |||
| changeOnBlur, | |||
| hasExtraFooter: !!renderExtraFooter, | |||
There was a problem hiding this comment.
usePickerInput 可以直接接收 renderExtraFooter 吗，不需要用 hasExtraFooter
There was a problem hiding this comment.
里面主要用来做逻辑判断应该用不到 renderExtraFooter 方法，因此我在外面判断是否存在。
| onSubmit: () => void | boolean; | ||
| onCancel: () => void; | ||
| onFocus?: React.FocusEventHandler<HTMLInputElement>; | ||
| onBlur?: React.FocusEventHandler<HTMLInputElement>; | ||
| }): [React.DOMAttributes<HTMLInputElement>, { focused: boolean; typing: boolean }] { | ||
| const [typing, setTyping] = useState(false); | ||
| const [focused, setFocused] = useState(false); | ||
| const [outside, setOutside] = useState(true); |
There was a problem hiding this comment.
这个改变需要 render 吗，可以用 useRef 吗
| @@ -152,6 +155,11 @@ export default function usePickerInput({ | |||
| const target = getTargetFromEvent(e); | |||
| const clickedOutside = isClickOutside(target); | |||
|
|
|||
| if (hasExtraFooter) { | |||
There was a problem hiding this comment.
这种零碎逻辑太多了不好，感觉是写个 RFC 让 ConfigProvider 支持关闭逻辑。例如默认是 blur 关闭，也可以设置成点击外部关闭。这样就不管你是哪个组件，都是一样的逻辑。
There was a problem hiding this comment.
footer 可以是按钮，需要点击后关闭 Picker，如果是 Input 就不需要关闭，最终还是要在 Picker 支持 props 控制是否可以关闭吧？
There was a problem hiding this comment.
footer 可以是按钮，需要点击后关闭 Picker，如果是 Input 就不需要关闭，最终还是要在 Picker 支持 props 控制是否可以关闭吧？
嗯嗯
There was a problem hiding this comment.
另外，点击 renderExtraFooter 位置元素，应该不属于 blur 啊？也没有离开 Picker 啊？为什么会触发 blur 呢？
There was a problem hiding this comment.
还有 Select 的自定义 render，也需要阻止冒泡。按理说点击自定义添加的按钮或者 Input，应该不属于 Select 的选中，不应该关闭 Select 的下拉框的
There was a problem hiding this comment.
对的，所以这里可以整理一个 RFC 出来。
close ant-design/ant-design#33125
目前还有一些问题：
1、input 需要设置 stopPropagation 才能聚焦，是否要在 footer 处集成；
2、select 等需要点击临时元素的，需要设置 getPopupContainer={(e) => e.parentElement}。