Select: Placeholder theming configuration has no effect

[NilsEvers]

Environment

• Operating System: Darwin
• Node Version: v21.5.0
• Nuxt Version: 3.9.1
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: [email protected]
• Builder: -
• User Config: modules, ssr, devtools, typescript, imports, ui,
• Runtime Modules: @nuxt/[email protected], @nuxtjs/[email protected]
• Build Modules: -

Version

v2.12.0

Reproduction

https://stackblitz.com/edit/nuxt-ui-isptnw?file=app.vue

Description

Theming the placeholder of the select component has no effect.

<USelect
  placeholder="This text should be red"
  :ui="{ placeholder: 'text-red-600 dark:text-red-600' }"
/>

In addition, the default style of the placeholder is kind of off compared to regular input fields

[benjamincanac]

There is a typo in your example: placholder -> placeholder.

[NilsEvers]

Sorry! I've updated the example.

The issue is not related to the typo though.

[benjamincanac]

You're absolutely right, the ui.placeholder is not taken into account on the Select component 🤔

[benjamincanac]

The reason is that the placeholder doesn't work the same on a <select> and cannot be styled like an <input>. The text-gray-900 dark:text-white from the white color is what's styling the select. The placeholder key should not exist in the select config.

Here's how you can change the color of the Select:

<USelect
  placeholder="This text should be red"
  :options="countries"
  :ui="{ color: { white: { outline: 'text-red-600 dark:text-red-600' } } }"
/>

[NilsEvers]

Thank you for the suggestion, but this would also change the color for the text when a value is selected.

I think that a separate color for the placeholder as well as a consistent style for the different input elements would be really beneficial.

[NilsEvers]

If you don't want to change the implementation to be more inline with the default <select> element (which has no placeholder), how about moving the placeholder key to the SelectMenu component?

This could be easily applied here.

[benjamincanac]

Here you go! I've applied the placeholder to the button / select when a placeholder prop is passed and nothing is selected.

[NilsEvers]

Thank you!