search

primefaces / primevue-tailwind

PrimeVue Components Styled with Tailwind CSS
https://tailwind.primevue.org
MIT License
589 stars 71 forks source link

InputText field used in the Tree component has wrong width #335

Closed eric-g-97477 closed 1 week ago

eric-g-97477 commented 1 week ago

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

image

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.

image

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 commented 1 week ago

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 commented 1 week ago

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 commented 5 days ago

confirmed.