InputText field used in the Tree component has wrong width

[eric-g-97477]

With the tailwind filter enabled on the Tree component, the magnification icon is not contained within the input field.

Looking at the filter enabled on the non-tailwind version, note how the magnification icon is on the right as well, but inside of the filter field.

Looking at the Lara theme, I see { 'w-full': props.fluid }, in the styling definition for inputtext. If I change this to simply 'w-full', it looks correct.

It seems clear that the props.fluid in the case is not being set correctly.

Looking at the PrimeVue source for the Tree component, I see the following:

        <IconField v-if="filter" :unstyled="unstyled" :pt="ptm('pcFilterContainer')">
            <InputText v-model="filterValue" autocomplete="off" :class="cx('pcFilterInput')" :placeholder="filterPlaceholder" :unstyled="unstyled" @keydown="onFilterKeydown" :pt="ptm('pcFilterInput')" />
            <InputIcon :unstyled="unstyled" :pt="ptm('pcFilterIconContainer')">
                <!--TODO: searchicon deprecated since v4.0-->
                <slot :name="$slots.filtericon ? 'filtericon' : 'searchicon'" :class="cx('filterIcon')">
                    <SearchIcon :class="cx('filterIcon')" v-bind="ptm('filterIcon')" />
                </slot>
            </InputIcon>
        </IconField>

The usage of InputText is not setting fluid and it should be.

[eric-g-97477]

At least one potential fix for this issue is to modify the inputtext theme file to do:

{ 'w-full': props.fluid || parent.instance.$name == 'IconField' },

I am convinced the actual bug is that the Tree component should be setting the fluid prop. However, it does seem ok to check to see if the parent is an IconField as the fluid prop should always be set if that is the case. However, my experience with PrimeVue is limited at this point, so I am not sure if this is a bad idea or not. But it is potential fix available to a dev and does not require a waiting for a change to the core PrimeVue Tree component.

[cagataycivici]

As of v4.1.1, the new Tailwind styles have been rewritten using the preprocessor approach with @apply. This issue should be resolved with the new implementation.

New Website is live.

[eric-g-97477]

confirmed.