Display-breaking change to <Input /> component

[mattdeboard]

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:

<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.

Reproduction

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 version and System Info

Flowbite-svelte 0.46.19

[mattdeboard]

Resolution

Use native <input /> element instead of <Input />

[shinokada]

https://flowbite-svelte.com/docs/forms/input-field#Input_group