原生H5页面在模态框中调用另一个模态框，新模态框中输入组件无法聚焦

问题描述：

在h5页面中弹出了一个原生的模态框，由于业务需求需要在模态框中触发二次模态框。

结果发现在新弹出的模态框中的input组件无法聚焦，不能进行按键输入。

过程分析：

开始时以为是页面被其他组件的挡住了(z-index)，于是调了一下，发现本身确实有这个问题（有个组件的zindex值过高），调整之后，依旧无法触发输入事件。

于是将input组件换成了button组件，发现button可以正常触发，于是猜测是无法获得焦点问题。

由于笔者在原来代码的基础上局部使用了elementUI框架，一度怀疑是elementUI的问题。

随即在网上搜索el-dialog中输入框无法获得焦点的原因。但发现其它人遇到的问题是有按键输入，无回显，但实际绑定的数据对象是有变化的。因此可以通过监听输入事件动态刷新回显展示。

然而，笔者测试后发现，绑定的数据并无变化，与该情况不符。

整改许久，也考虑不用框架换成了原生的模态框依旧是这样的问题。

解决方案：

最后查到原来第一个模态框中的tabindex=“-1”导致的问题。在父模态框中删除该属性即可。

由于多个模态框同时出现，并且tabindex的值相同，按照先后顺序，导致无焦。

替代方案：

其实也可以考虑一开始父模态框就使用elementUI的el-dialog组件的，毕竟官方就提供了嵌套调用的示例。笔者这里是由于代码是新接手的，无法做大规模调整，于是魔改一番。