添加链接功能在有Vuetify输入框组件的情况下无法获取焦点

Goxiaogle commented 2 weeks ago

描述这个Bug

当点击添加链接弹窗中的这两个输入框，输入框无法获取焦点与输入文字，焦点会聚焦在后面Vuetify的VTextField组件上。此时按键盘进行输入，输入的文字最终也是到后面的输入框上。该BUG复现率为100% 移除所有VTextField组件后，添加链接弹窗的输入框便可正常获取到焦点

版本号

Vuetify版本：3.6.8，MdEditorV3版本：4.17.3

问题重现链接

No response

Goxiaogle commented 2 weeks ago

在md-editor-v3最新版4.19.2下仍然存在该bug

imzbf commented 2 weeks ago

能否给一个在线的demo

Goxiaogle commented 1 week ago

https://1990593.playcode.io/

上面是在线示例，当点击添加链接的输入框时，焦点莫名会聚焦到后面的Vuetify输入框

不过这个例子和我遇到的还不是非常一样，因为这个例子中多次点击添加链接的输入框后就可以正常聚焦了

Goxiaogle commented 1 week ago

下面是上面在线示例的完整代码：目前发现触发条件是：VDialog中套VForm中套VTextField+MdEditorV3就会出现这种情况

<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8"/>
        <link
                href="https://unpkg.com/md-editor-v3@4.19.2/lib/style.css"
                rel="stylesheet"
        />
        <link
                href="https://cdn.jsdelivr.net/npm/vuetify@3.7.1/dist/vuetify.min.css"
                rel="stylesheet"
        />
    </head>
    <body>
        <div id="md-editor-v3" style="display:flex;flex-direction:column;">
            <v-dialog max-width="500">
                <v-card title="测试弹窗" style="display:flex;">
                    <v-form>
                        <v-text-field v-model="testText1" label="Text"></v-text-field>
                        <v-text-field v-model="testText2" label="Text"></v-text-field>
                        <md-editor-v3 v-model="text"></md-editor-v3>
                    </v-form>
                </v-card>

                <template v-slot:activator="{ props: activatorProps }">
                    <v-btn
                            v-bind="activatorProps"
                            color="surface-variant"
                            text="Open Dialog"
                            variant="flat"
                    ></v-btn>
                </template>
            </v-dialog>
        </div>
        <script src="https://unpkg.com/vue@3.2.47/dist/vue.global.prod.js"></script>
        <script src="https://unpkg.com/md-editor-v3@4.19.2/lib/umd/index.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vuetify@3.7.1/dist/vuetify.min.js"></script>

        <script>
            const App = {
                data() {
                    return {
                        text: 'Hello Editor!!',
                        testText1: '',
                        testText2: '',
                    };
                }
            };
            const {createVuetify} = Vuetify;

            const vuetify = createVuetify();
            Vue.createApp(App)
                .use(MdEditorV3.MdEditor)
                .use(vuetify)
                .mount('#md-editor-v3');
        </script>
    </body>
</html>

imzbf commented 1 week ago

这个问题我多次尝试，认为是vuetify的问题。

我发现只要是弹窗将内容挂到body上，vuetify的输入框就会聚焦，包括但不限制这里的编辑器组件的弹窗，以及element-plus的弹窗。

下面是element-plus的弹窗示例，即使是反复点击弹窗，text输入框仍然会自动聚焦。你可以尝试向vuetify官方求助

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link href="https://unpkg.com/md-editor-v3@4.19.2/lib/style.css" rel="stylesheet" />
    <link
      href="https://cdn.jsdelivr.net/npm/vuetify@3.7.1/dist/vuetify.min.css"
      rel="stylesheet"
    />
    <!-- Import style -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
  </head>
  <body>
    <div id="md-editor-v3" style="display: flex; flex-direction: column">
      <v-dialog max-width="500">
        <v-card title="测试弹窗" style="display: flex">
          <v-form>
            <v-text-field v-model="testText1" label="Text"></v-text-field>
            <v-text-field v-model="testText2" label="Text"></v-text-field>

            <el-dialog
              v-model="dialogVisible"
              title="Tips"
              append-to-body
              width="500"
              z-index="10000"
            >
              内容
            </el-dialog>
          </v-form>

          <el-button @click="dialogVisible = true">点击</el-button>
        </v-card>

        <template v-slot:activator="{ props: activatorProps }">
          <v-btn
            v-bind="activatorProps"
            color="surface-variant"
            text="Open Dialog"
            variant="flat"
          ></v-btn>
        </template>
      </v-dialog>
    </div>
    <script src="https://unpkg.com/vue@3.2.47/dist/vue.global.prod.js"></script>
    <script src="https://unpkg.com/md-editor-v3@4.19.2/lib/umd/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@3.7.1/dist/vuetify.min.js"></script>
    <script src="https://unpkg.com/element-plus"></script>

    <script>
      const App = {
        data() {
          return {
            text: 'Hello Editor!!',
            testText1: '',
            testText2: '',
            dialogVisible: false
          };
        }
      };
      const { createVuetify } = Vuetify;

      const vuetify = createVuetify();
      Vue.createApp(App)
        .use(MdEditorV3.MdEditor)
        .use(vuetify)
        .use(ElementPlus)
        .mount('#md-editor-v3');
    </script>
  </body>
</html>

imzbf / md-editor-v3

添加链接功能在有Vuetify输入框组件的情况下无法获取焦点 #655

描述这个Bug

版本号

问题重现链接