Ant-design-mobile: iOS Modal.prompt input hit area too small & keyboardavoidView

[cncolder]

Version

1.4.0

Environment

iPhone5s Safari

Reproduction link

https://mobile.ant.design/components/modal-cn/

Steps to reproduce

点击 prompt 里的 input

What is expected?

一次命中

What is actually happening?

要很仔细的找准位置。

[cncolder]

之前听说过 Mobile safari focus 问题，实现不了 autofocus。

在只有一个 input 的情况下，能不能让整个 body 都做为 hit area？

[paranoidjk]

在只有一个 input 的情况下，能不能让整个 body 都做为 hit area？

这个我不赞成，点击区域扩得太大了。

这个尝试提供 focus. https://github.com/ant-design/ant-design-mobile/issues/1243

[silentcloud]

扩大到 body，太大了

[cncolder]

别激动，随口一说。😁
我只是想了解一下是不是还有人和我一样觉得这个很难点中。

我自己的解决办法是增加 line-height

[paranoidjk]

实测居中是比较难点，要么样式上优化，要么提供 js 的 focus api

[paranoidjk]

@silentcloud Modal.Prompt 的 sketch 在哪？发我一份，input 感觉高度太小了

[silentcloud]

@paranoidjk 这个有点时间了，我本地是没有了，找设计师问问看还有没有

[afc163]

<label>
  <h2>标题</h2>
  <input />
</label>

套个 label。

https://codepen.io/anon/pen/PjOmZd?editors=001

[cncolder]

@afc163 Modal.prompt 没办法传入 children。

甚至都没办法指定 input text/password 以外的类型。

是不是应该再加一个 custom type，允许用户传入自己的 input，甚至允许任意 Element，只要接口符合就行。

interface {
  defaultValue: any
  // focus: () => void // 这个可以不要，调用的时候判断有没有 focus 方法。
  onChange: (value: string) => void
}

[silentcloud]

@cncolder

是不是应该再加一个 custom type，允许用户传入自己的 input，甚至允许任意 Element

那这个 api 方法就不好定了，而且还要 rn web 一致

[paranoidjk]

@cncolder
看 #1125 ， 我有提议在 2.0 将 API 改成声明式的

[linhanyang]

键盘遮挡按钮问题不知道大家如何解决呢？

[paranoidjk]

@linhanyang

应该不会有键盘遮挡的问题，antd-mobile 做了 处理，实测也无法复现。

请提供可复现的 demo.

[linhanyang]

@paranoidjk

在react native平台

[paranoidjk]

@silentcloud 实测的确有键盘遮挡的问题，rn 有办法类似 web scrollIntoView 的方案吗？

[paranoidjk]

http://facebook.github.io/react-native/docs/keyboardavoidingview.html

[paranoidjk]

@linhanyang https://github.com/rccoder/blog/issues/25

[linhanyang]

嗯，是可以采用这个方法，此方法需要考虑兼容andorid平台

[linhanyang]

是否考虑在此组件加入这个方法呢？
@paranoidjk

[linhanyang]

遮挡问题没有解决哦，刚试了这个版本，还是有遮挡问题。

[linhanyang]

https://github.com/maxs15/react-native-modalbox/issues/87

[linhanyang]

https://github.com/raynor85/react-native-modal-wrapper

[linhanyang]

@paranoidjk

[paranoidjk]

@linhanyang 抱歉，最近比较忙，这个问题如上所说，你业务代码可以自己解决，优先级比较低。

组件内部实现的不完美的话，欢迎 PR 来帮我们修复。

[linhanyang]

嗯，我目前仅仅做了下调整，而且不是太好的办法。现在在ios上显示是个问题，不仅仅是业务问题。

[aizigao]

同样的问题，项一下

[aizigao]

我在rc-dialog下提了个pr https://github.com/react-component/dialog/pull/67 ， 参考react-native中语网的写法 ， 将keyboardavoidingview放在 Modal下可以解决这个问题

[linhanyang]

@paranoidjk 好像这个问题还是没解决吧？