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

[n-time-picker] Strange behaviour #2612

Closed
OrbisK opened this issue Mar 10, 2022 · 7 comments
Closed

[n-time-picker] Strange behaviour #2612

OrbisK opened this issue Mar 10, 2022 · 7 comments
Labels
bug Something isn't working

Comments

@OrbisK
Copy link
Collaborator

OrbisK commented Mar 10, 2022

TuSimple/naive-ui version (版本)

2.26.3

Vue version (Vue 版本)

3.2.27

Browser and its version (浏览器及其版本)

Opera GX LVL 3 (core: 83.0.4254.70)

System and its version (系统及其版本)

Win 11

Node version (Node 版本)

Reappearance link (重现链接)

https://codesandbox.io/s/focused-grothendieck-vibw12?file=/src/Form.vue

Reappearance steps (重现步骤)

  1. Click on the button
  2. Select a time in first select
  3. Select a time in second select

Expected results (期望的结果)

Second select should work properly

Actual results (实际的结果)

Second select closes after each selection.
First one works properly.

Remarks (补充说明)

@github-actions github-actions bot added the untriaged need to sort label Mar 10, 2022
@OrbisK
Copy link
Collaborator Author

OrbisK commented Mar 10, 2022

I guess it related to the focus. Somehow it remains on the first one

@Sepush
Copy link
Collaborator

Sepush commented Mar 10, 2022

I guess it related to the focus. Somehow it remains on the first one

你的复现没写完啊
image

@OrbisK
Copy link
Collaborator Author

OrbisK commented Mar 10, 2022

I guess it related to the focus. Somehow it remains on the first one

你的复现没写完啊 image

image
I did

@OrbisK
Copy link
Collaborator Author

OrbisK commented Mar 10, 2022

just in case ill paste the code here:

// Form.vue
<template>
  <n-form :model="model">
    <n-grid :cols="12" :x-gap="12">
      <n-form-item-gi :span="6" label="Number">
        <n-time-picker></n-time-picker>
      </n-form-item-gi>
      <n-form-item-gi :span="6" label="Text">
        <n-time-picker></n-time-picker>
      </n-form-item-gi>
    </n-grid>
  </n-form>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    return {
      model: ref({
        number: 0,
        text: "",
      }),
    };
  },
});
</script>
// Demo.vue
<template>
  <n-button @click="handleClick">Click me</n-button>
</template>

<script lang="ts">
import { defineComponent, h } from "vue";
import { useDialog } from "naive-ui";
import Form from "./Form.vue"

export default defineComponent({
  setup() {
    const dialog = useDialog();
    return {
      handleClick: () => {
        dialog.info({
          title: "test",
          content: ()=> h(Form)
        });
      },
    };
  },
});
</script>

@Sepush
Copy link
Collaborator

Sepush commented Mar 10, 2022

嗯 现在好了 确实是个bug

@Sepush Sepush added bug Something isn't working and removed untriaged need to sort labels Mar 10, 2022
@07akioni
Copy link
Collaborator

07akioni commented Mar 10, 2022

This is actually caused by modal focus management. I think I should provide a demo to make the behavior clearer.

@OrbisK
Copy link
Collaborator Author

OrbisK commented Mar 10, 2022

Okay. Thanks for this quick fix 👍

jaulz pushed a commit to jaulz/naive-ui that referenced this issue Mar 11, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants