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.

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

Modal等弹窗无法关闭的问题 #2486

Closed
MickeyMouse623 opened this issue Apr 23, 2018 · 15 comments
Closed

Modal等弹窗无法关闭的问题 #2486

MickeyMouse623 opened this issue Apr 23, 2018 · 15 comments
Assignees
Milestone

Comments

@MickeyMouse623
Copy link

** 问题1:版本2.1.8,Modal.alert 在IOS 8.* 系统中不执行 onPress 方法,无法关闭弹窗 **
** 问题2:版本2.1.8,Picker 和 datePicker 等组件 在 android 4.4.0 系统中,无法关闭弹窗 **

@ant-design-bot
Copy link

Translation of this issue:


Modal and other pop-ups cannot be closed

** Issue 1: Version 2.1.8, Modal.alert does not implement the onPress method in IOS 8.* systems and cannot close the popup **
** Issue 2: Version 2.1.8, picker, datePicker, etc. In android 4.4.0 system, popups cannot be closed **

@iceberg211
Copy link

你的modal内容高度会出现问题吗?我的modal内容会和html高度相同

@niices
Copy link

niices commented Apr 26, 2018

我也有这个问题
ios 10.3.3 微信浏览器跟safari浏览器无法关闭
ios 11.3.0都没问题

@jindada
Copy link

jindada commented Apr 26, 2018

切换到2.1.6 可以解决这个问题

@niices
Copy link

niices commented Apr 26, 2018

已通过fastclick解决

import fastclick from 'fastclick'
fastclick.attach(document.body, {});

@MickeyMouse623
Copy link
Author

** 问题1:版本2.1.8,Modal.alert 在IOS 8.* 系统中不执行 onPress 方法,无法关闭弹窗 **
** 解决 **:
在 node_modules/antd-mobile/modal/alert.js 中

`
 function onWrapTouchStart(e) {
    if (!/iPhone|iPod|iPad/i.test(navigator.userAgent)) {
        return;
    }
    var pNode = (0, _closest2['default'])(e.currentTarget, '.' + prefixCls + '-footer');
    if (!pNode) {
        e.preventDefault();
    }
}

`
pNode 部分系统为 null,所以无法点击。
增加了 babel-polyfill 解决了

** 问题2:版本2.1.8,Picker 和 datePicker 等组件 在 android 4.4.0 系统中,无法关闭弹窗 **
** 解决 **:
Modal、datePicker、picker 等组件生成DOM时是在 body 最后插入的。这时因为 z-index 的原因导致这些组件无法点击到

@iceberg211 @niices @jindada @luolonghao

@likezero
Copy link
Contributor

likezero commented May 4, 2018

无法关闭弹窗的问题,试着引入fastclick解决下

@warmhug
Copy link
Contributor

warmhug commented May 4, 2018

@MickeyMouse623 问题2 官网线上 demo 在 android 4.4.0 能复现吗?

@warmhug
Copy link
Contributor

warmhug commented May 4, 2018

@jindada 2.1.6 这两个问题都没有吗?2.1.8 有?官网 demo 有没有?麻烦再次帮忙确认下、感谢

@likezero likezero self-assigned this May 4, 2018
@likezero
Copy link
Contributor

likezero commented May 4, 2018

@MickeyMouse623
问题1:版本2.1.8,Modal.alert 在IOS 8.* 系统中不执行 onPress 方法,无法关闭弹窗 **
请引入fastclick解决

@kpaxqin
Copy link

kpaxqin commented May 9, 2018

@likezero @warmhug

fastclick已经两年没有维护了,是否考虑去掉对fastclick的依赖?目前观察到引入fastclick反而会导致原生input元素focus事件在iOS上延迟甚至无反应

@likezero
Copy link
Contributor

@kpaxqin
后续会考虑。但目前还是有依赖,你说的延迟无反应有具体的复现demo 以及运行环境吗?

@warmhug
Copy link
Contributor

warmhug commented May 10, 2018

@kpaxqin @likezero

const pNode = closest(e.currentTarget, `.${prefixCls}-footer`);

这里应该是有 bug 帮忙 check 下,其他地方应该没有强依赖 fastclick

Ref #2477 #2428 #2442

warmhug referenced this issue May 11, 2018
* refactor(util): noImplicitAny

* refactor(accordion): type definitions improvements

* refactor(action-sheet): add missing type definitions

* chore: configuration

* refactor(activity-indicator): type definitions

* chore: configuration

* refactor(badge): type definitions

* refactor(button): type definitions

* refactor(calendar): type definitions

* refactor(card): type definitions

* refactor(carousel): add type definitions and refactor native part

* refactor(checkbox): type definitions

* refactor(list): type definitions

* refactor(date-picker): type definitions

* refactor(date-picker-view): type definitions

* refactor(drawer): type definitions

* refactor(flex): type definitions

* refactor(grid): type definitions

* refactor(icon): type definitions

* refactor(image-picker): type definitions

* refactor(input-item): type definitions and code refactor

* refactor(locale-provider): type definitions

* refactor(menu): type definitions

* refactor(modal): type definitions

* refactor(nav-bar): type definitions

* refactor(notice-bar): type definitions

* refactor(pagination): type definitions

* refactor(picker): type definitions

* refactor(picker-view): type definitions

* refactor(popover): type definitions

* refactor(progress): type definitions

* refactor(radio): type definitions

* refactor(range): type definitions

* refactor(result): type definitions

* refactor(search-bar): type definitions

* refactor(segmented-control): type definitions

* refactor(slider): type definitions

* refactor(stepper): type definitions

* refactor(steps): type definitions

* refactor(swipe-action): type definitions

* refactor(switch): type definitions

* refactor(tab-bar): type definitions

* refactor(tabs): type definitions

* refactor(tag): type definitions

* refactor(view|text): type definitions

* refactor(textarea-item): type definitions

* refactor(toast): type definitions

* refactor(white-space): type definitions

* refactor(wing-blank): type definitions

* refactor(list-view): type definitions

* refactor(demo): any

* chore(style): use ant-tools tslint configurations

* test: update snapshots

* chore: remove unnecessary configurations and deps

* chore: tslint

* chore: add setup file

* fix: #2302

* test: update snap

* chore: update deps and  fix tests

* chore: try to let jest faster

* refactor(Icon): extends from SVG Props
@warmhug warmhug added this to the 2.1.x milestone May 11, 2018
BANG88 added a commit to BANG88/ant-design-mobile that referenced this issue May 11, 2018
* master:
  fix: Modal event close ant-design#2486
  fix(input-item): user experience regression on non-mutate control (ant-design#2537)
  fix(input-item): cursor dislocation when typing via system keyboard of UC browser (ant-design#2532)
  fix(Accordion): make aria-expanded prop valid in preact, close ant-design#2491 (ant-design#2530)
  fix(input-item): value.substring is not a function (ant-design#2508)
  demo: add use of listview component nested with tabbar, close ant-design#2455 (ant-design#2527)
  docs: improve List doc, close ant-design#2514
  docs: fix typo (ant-design#2523)
  fix: style of <SearchBar/> (ant-design#2510)
  fix: development error
  fix: upgrade rmc-feedback to 2.x (ant-design#2509)
  fix(textarea-item) close ant-design#2372 (ant-design#2506)
  docs: improve Progress api doc
  Update index.zh-CN.md (ant-design#2494)
  lint: fix ts error in @types/react-native-drawer-layout
  chore: fix test error
  build: delete cdn-tools in deploy cmd
  demo: add dynamic child demo to Carousel, ref ant-design#2434
  demo: improve Carousel demo
  docs: add change
@pengshaosu
Copy link

@kpaxqin
后续会考虑。但目前还是有依赖,你说的延迟无反应有具体的复现demo 以及运行环境吗?

Note: As of late 2015 most mobile browsers - notably Chrome and Safari - no longer have a 300ms touch delay, so fastclick offers no benefit on newer browsers, and risks introducing bugs into your application. Consider carefully whether you really need to use it.

@luojinghui
Copy link

Model组件包含input输入类型组件,会造成Model无法关闭,解决方式:#3467

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants