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

Conditional rendering on DateElement with extendOptions: { weekNumbers: true } causes the Flatpickr render with width 1px #147

Closed
joosia opened this issue Feb 17, 2024 · 0 comments

Comments

@joosia
Copy link

joosia commented Feb 17, 2024

Environment

  • vite 4.3.2
  • vue 3.2.47
  • tailwindcss 3.3.3

Reproduction

Use schema object with conditional rendering:

start_date_with_time: {
    conditions: [['use_time', true]],
    type: 'date',
    time: true,
    default:  dayjs().format(),
    rules: [
      {
        required: ['use_time', true]
      }
    ],
    formatData(name, value) {
      return { start_date: value };
    },
    extendOptions: {
      // weekNumbers: true, // <- this is causing the error and flatpickr width will be 1px
      allowInput: true,
      position: 'above' // <- unrelated to this bug, but it seems this options isn't respected and doesn't work with vueform
    },
  }

Describe the bug

Conditional rendering on DateElements (at least when using schema object) doesn't render correctly with extendOptions. Not sure if it's actually a bug related to Flatpickr itself. The issue is with the config options weekNumbers. Displaying week numbers changes the width of the container so perhaps that's the reason. As an additional note, also config option position is not respected causing the flatpickr always to render below the input field.

Additional context

No response

Logs

No response

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

No branches or pull requests

2 participants