fix: interacting with footer components closes the date selection panel#683
fix: interacting with footer components closes the date selection panel#683Yuiai01 wants to merge 2 commits intoreact-component:masterfrom
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 |
|
目前还有一些问题： |
| 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 方法，因此我在外面判断是否存在。
| }): [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 吗
| 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 出来。
3 participants
close ant-design/ant-design#33125
目前还有一些问题：
1、input 需要设置 stopPropagation 才能聚焦，是否要在 footer 处集成；
2、select 等需要点击临时元素的，需要设置 getPopupContainer={(e) => e.parentElement}。