Open mattdeboard opened 1 week ago
At some point between the 0.46.15 and 0.46.19 release, the Input component changed such that it breaks the UI for a search bar on my page.
Input
0.46.15 <Input />:
<Input />
0.46.19 <Input />:
The big difference, as far as I can tell, is that in the 0.46.19 case, the native <input /> element is wrapped like so:
<input />
<div class='relative w-full'> <input class='...'></input> </div>
But in 0.46.15 it is not. That, I assume, it's what's breaking my display there.
Not sure what makes a valuable reproduction in this case, but the component defining that search bar is here:
<div id="address-input" class={classNames( 'flex', 'rounded-md', 'shadow-sm', 'col-span-full', )} > <ButtonGroup class={classNames( 'w-full', 'ring-1', 'bg-inherit', 'ring-secondary-500', 'focus-within:ring-primary-600', 'focus-within:border-r-primary-900', )} > <CheckboxButton id="geolocation-button" name="geolocation-toggle" checked={$filtersStore.useGeolocationAPI} class={classNames( ...geolocationBtnStyleClasses, 'text-center', 'font-medium', 'focus-within:ring-0', 'focus-within:z-0', 'items-center', 'justify-center', 'px-4', 'py-2', 'text-sm', 'hover:bg-inherit', 'border-none', '[&:not(:first-child)]:-ms-px', 'first:rounded-s-lg', 'last:rounded-e-lg', 'inline-flex', 'cursor-pointer', '!p-2', )} on:click={onChangeUseGeolocation} > {#if $filtersStore.useGeolocationAPI} <svelte:component this={LocateFixedIcon} role="button" /> {:else} <svelte:component this={LocateIcon} role="button" /> {/if} </CheckboxButton> <Input on:click={() => { if ($filtersStore.useGeolocationAPI) { filtersStore.toggleGeolocationAPI(); locationValue.set(addressValue); } }} on:input={handleAddressInput} bind:value={$locationValue} type="text" name="address" id="address" class={classNames( 'block', 'flex-1', 'border-0', 'bg-transparent', 'py-1.5', 'pl-1', 'text-secondary-200', 'placeholder:text-secondary-400', 'focus:ring-0', 'sm:text-sm', 'sm:leading-6', $filtersStore.useGeolocationAPI || 'bg-secondary-900', )} placeholder={$filtersStore.useGeolocationAPI ? 'Using Device Location' : '111 Main St., Kenai, AK'} /> </ButtonGroup> </div>
Flowbite-svelte 0.46.19
Use native <input /> element instead of <Input />
https://flowbite-svelte.com/docs/forms/input-field#Input_group
Describe the bug
At some point between the 0.46.15 and 0.46.19 release, the
Input
component changed such that it breaks the UI for a search bar on my page.0.46.15
<Input />
:0.46.19
<Input />
:The big difference, as far as I can tell, is that in the 0.46.19 case, the native
<input />
element is wrapped like so:But in 0.46.15 it is not. That, I assume, it's what's breaking my display there.
Reproduction
Not sure what makes a valuable reproduction in this case, but the component defining that search bar is here:
Flowbite version and System Info