Outline is cut for Dropdown widgets with non-default border radius about formkit HOT 4 CLOSED

Thanks, working as expected now!

from formkit.

I think, this can be fixed on the theme level.

But, until it's fixed i wanted to do a local fix by overriding classes.

I have tried this, but it doesn't work. How to properly pass path to dropdown listitem element? I have also tried using generateClasses, it provides a way to specify which widget i want to style, but it does not support object syntax, and i like to use object syntax, because it's much better than plain text.

export const formKitConfig = defaultConfig({
  config: {
    rootClasses,
    classes: {
      'family:dropdown__listitem': {
        $reset: true,
        'text-red': true,
      },
    },
  },
})

from formkit.

I'll look into correcting this at the theme level, but you can try this in your config. generateClasses is going to be the play here:

import { generateClasses } from '@formkit/themes'

export const formKitConfig = defaultConfig({
  config: {
    rootClasses,
    classes: generateClasses({
      'family:dropdown': {
        listitem: {
          $reset: true,
          'text-red': true,
        }
      },
    }),
  },
})

Here's a playground showing it in action: https://formkit.link/9c825b7754884c8a79b83dc0a88d5ed9

You can write your own selector for listitem if you want without generateClasses but you'll need to do your own filtering in a function to make sure it only applies to dropdown family items. Here's the relevant source code:

from formkit.

@last-partizan — This is fixed. If you regenerate your theme you should get the new styling.

from formkit.