test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:48:45 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix: 移动端弹窗、抽屉配置了closeOnOutside， 移动端下拉类型的表单选择后整个弹窗关闭

Browse Source
This commit is contained in:
zhangxulong 2024-10-08 15:34:22 +08:00
parent 9002363c66
commit 3c1c6cb0b0
2 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/amis-ui/src/components/Drawer.tsx
View File

@ -44,6 +44,7 @@ export interface DrawerProps {
onEntered?: () => void; onEntered?: () => void;
drawerClassName?: string; drawerClassName?: string;
drawerMaskClassName?: string; drawerMaskClassName?: string;
mobileUI?: boolean;
} }
export interface DrawerState {} export interface DrawerState {}
const fadeStyles: { const fadeStyles: {
@ -168,7 +169,7 @@ export class Drawer extends React.Component<DrawerProps, DrawerState> {
@autobind @autobind
handleRootMouseDownCapture(e: MouseEvent) { handleRootMouseDownCapture(e: MouseEvent) {
const target = e.target as HTMLElement; const target = e.target as HTMLElement;
const {closeOnOutside, classPrefix: ns} = this.props; const {closeOnOutside, classPrefix: ns, mobileUI} = this.props;
const isLeftButton = const isLeftButton =
(e.button === 1 && window.event !== null) || e.button === 0; (e.button === 1 && window.event !== null) || e.button === 0;
@ -177,7 +178,9 @@ export class Drawer extends React.Component<DrawerProps, DrawerState> {
closeOnOutside && closeOnOutside &&
target && target &&
this.modalDom && this.modalDom &&
((!this.modalDom.contains(target) && !target.closest('[role=dialog]')) || ((!mobileUI &&
!this.modalDom.contains(target) &&
!target.closest('[role=dialog]')) ||
(target.matches(`.${ns}Drawer-overlay`) && (target.matches(`.${ns}Drawer-overlay`) &&
target.parentElement === this.modalDom)) target.parentElement === this.modalDom))
); // 干脆过滤掉来自弹框里面的点击 ); // 干脆过滤掉来自弹框里面的点击

6
packages/amis-ui/src/components/Modal.tsx
View File

@ -270,7 +270,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
@autobind @autobind
handleRootMouseDownCapture(e: MouseEvent) { handleRootMouseDownCapture(e: MouseEvent) {
const target = e.target as HTMLElement; const target = e.target as HTMLElement;
const {closeOnOutside, classPrefix: ns} = this.props; const {closeOnOutside, classPrefix: ns, mobileUI} = this.props;
const isLeftButton = const isLeftButton =
(e.button === 1 && window.event !== null) || e.button === 0; (e.button === 1 && window.event !== null) || e.button === 0;
@ -279,7 +279,9 @@ export class Modal extends React.Component<ModalProps, ModalState> {
closeOnOutside && closeOnOutside &&
target && target &&
this.modalDom && this.modalDom &&
((!this.modalDom.contains(target) && !target.closest('[role=dialog]')) || ((!mobileUI &&
!this.modalDom.contains(target) &&
!target.closest('[role=dialog]')) ||
(target.matches(`.${ns}Modal`) && target === this.modalDom)) (target.matches(`.${ns}Modal`) && target === this.modalDom))
); // 干脆过滤掉来自弹框里面的点击 ); // 干脆过滤掉来自弹框里面的点击
} }