Setting Classes of Parent Components

[SergejGleithmann]

Hello!

If I have for example an Autocomplete Element, how can I set the class-attributs of the elements associated with the Input element?

const autocomplete = new te.Autocomplete(asyncAutocomplete, {
        filter: asyncFilter,
        threshold: 2,
        debounce: 300,
        displayValue: (value) => value.name,
        itemContent: (result) => ...,
        customContent: '<div data-te-autocomplete-custom-content-ref class="p-2 text-sm"></div>',
        noResults: ...,
    },
    {
        autocompleteItem: 'flex flex-row items-center justify-between w-full px-4 py-[0.4375rem] text-gray-700 bg-transparent select-none cursor-pointer hover:[&:not([data-te-autocomplete-option-disabled])]:bg-black/5 data-[te-autocomplete-item-active]:bg-black/5 data-[data-te-autocomplete-option-disabled]:text-gray-400 data-[data-te-autocomplete-option-disabled]:cursor-default dark:text-gray-200 dark:hover:[&:not([data-te-autocomplete-option-disabled])]:bg-white/30 dark:data-[te-autocomplete-item-active]:bg-white/30',
        notchLeadingNormal: 'border-neutral-600 dark:border-neutral-600 group-data-[te-input-focused]:shadow-[-1px_0_0,_0_1px_0_0,_0_-1px_0_0] group-data-[te-input-focused]:shadow-primary group-data-[te-input-focused]:border-primary',
        notchMiddleNormal: 'border-neutral-600 dark:border-neutral-600 group-data-[te-input-focused]:shadow-[0_1px_0_0] group-data-[te-input-focused]:shadow-primary group-data-[te-input-focused]:border-primary',
        notchTrailingNormal: 'border-neutral-600 dark:border-neutral-600 group-data-[te-input-focused]:shadow-[1px_0_0,_0_-1px_0_0,_0_1px_0_0] group-data-[te-input-focused]:shadow-primary group-data-[te-input-focused]:border-primary',
    });

In the above example every attribute except the notch attributes (which belong to Input and not exclusively to Autocomplete) are correctly applied.
The docs state: Note: To apply styling to an input element, you can utilize the identical classes as those available in the Inputs API.
This is what I thought I alredy did.

What am I missing?

[iprzybysz]

Hi @SergejGleithmann, Autocomplete doesn't initialise the Input component, You have to also add Input initialization to your code and then apply your custom input classes or use data attributes.

 const autocomplete = new te.Autocomplete(asyncAutocomplete, {
    filter: asyncFilter,
    threshold: 2,
    debounce: 300,
    displayValue: (value) => value.name,
    itemContent: (result) => ...,
    customContent: '<div data-te-autocomplete-custom-content-ref class="p-2 text-sm"></div>',
    noResults: ...,
 },
 {
   autocompleteItem: 'flex flex-row items-center justify-between w-full px-4 py-[0.4375rem] text-gray-700 bg-transparent select-none cursor-pointer hover:[&:not([data-te-autocomplete-option-disabled])]:bg-black/5 data-[te-autocomplete-item-active]:bg-black/5 data-[data-te-autocomplete-option-disabled]:text-gray-400 data-[data-te-autocomplete-option-disabled]:cursor-default dark:text-gray-200 dark:hover:[&:not([data-te-autocomplete-option-disabled])]:bg-white/30 dark:data-[te-autocomplete-item-active]:bg-white/30',
 });
    
const input = new te.Input(yourInputElement, { yourOptions }, {
    notchLeadingNormal: 'border-neutral-600 dark:border-neutral-600 group-data-[te-input-focused]:shadow-[-1px_0_0,_0_1px_0_0,_0_-1px_0_0] group-data-[te-input-focused]:shadow-primary group-data-[te-input-focused]:border-primary',
    notchMiddleNormal: 'border-neutral-600 dark:border-neutral-600 group-data-[te-input-focused]:shadow-[0_1px_0_0] group-data-[te-input-focused]:shadow-primary group-data-[te-input-focused]:border-primary',
    notchTrailingNormal: 'border-neutral-600 dark:border-neutral-600 group-data-[te-input-focused]:shadow-[1px_0_0,_0_-1px_0_0,_0_1px_0_0] group-data-[te-input-focused]:shadow-primary group-data-[te-input-focused]:border-primary'
});

[SergejGleithmann]

Hi @iprzybysz,
thanks for the reply. However, I think I do not really understand the rationale behind this. If I initialize an Autocomplete component, I also get an Input element or not? (At least the Autocomplete element looks like an extension of the Input element and the docs tell me that I can customize the Input-part of the component with the same classes-api as the Input element, if I understand correctly.)
I would like to alter the classes of the Input element created with the autocomplete. If I would take your approach I would need to know the element that Autocomplete uses (and eventually even creates) to bind the Input element to. In other words: the HTML-element that I would pass as an argument for Input (yourInputElement in your example) does not exist prior to the initialization of Autocomplete, or not?

[iprzybysz]

Autocomplete uses the Input component, but don't initialiaze it, because Input is a separate component, so it requires also initialization. Unless autocomplete wrapper element, on which you initialiaze Autocomplete component, has a data-te-input-wrapper-init attribute it will automatically initaliaze it when you call new te. Autocomplete, but in another case you'll have to initialiaze it yourself as I described in the previous message. YourInputElement will be the same element as this for Autocomplete initialization. We've added this note about Input classes in API documentation because users are also able to use class customization with data attributes. These data attributes should be added on the wrapper on which two components are initialiazed. So it looks like you're customizing Input classes on the Autocomplete component, but it's not true, because it relates Input component. Components whose HTML code is in an HTML file require initialization on the user's side. We've done this to provide better customization.

[SergejGleithmann]

Thank you @iprzybysz!