Inconsistent spacing in searchable select
Overview
FrankenUI provides a select component. This component is also searchable with the searchable attribute.
By default, the dropdown opens below the select input.
If there isn’t enough space below the component in the viewport, the dropdown opens above it instead.
When typing a search query to filter the dropdown options, an unexpected gap appears between the input and the filtered options, causing a visual inconsistency.
This is especially noticeable when when no items match the search query, leaving a floating searchbar in the middle of the screen.
Demonstration:
Reproducible Example:
<html class="lang=" en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/core.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/utilities.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/core.iife.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/icon.iife.js" type="module"></script>
</head>
<body>
<main class="uk-container uk-padding">
<div><button class="uk-btn uk-btn-default">Dummy Button 1</button></div>
<div><button class="uk-btn uk-btn-default">Dummy Button 2</button></div>
<div><button class="uk-btn uk-btn-default">Dummy Button 3</button></div>
<div><button class="uk-btn uk-btn-default">Dummy Button 4</button></div>
<div><button class="uk-btn uk-btn-default">Dummy Button 5</button></div>
<div><button class="uk-btn uk-btn-default">Dummy Button 6</button></div>
<div><button class="uk-btn uk-btn-default">Dummy Button 7</button></div>
<div><button class="uk-btn uk-btn-default">Dummy Button 8</button></div>
<div><button class="uk-btn uk-btn-default">Dummy Button 9</button></div>
<div><button class="uk-btn uk-btn-default">Dummy Button 10</button></div>
<form class="uk-form-stacked">
<fieldset class="uk-fieldset">
<legend class="uk-legend">Location</legend>
<div class="uk-margin"><label class="uk-form-label" for="country">Country</label>
<div class="h-10"><uk-select class="w-full" placeholder="Select a country" searchable
cls-custom="button: uk-input-fake w-full; dropdown: w-full" name="country">
<select hidden>
<option value="us" data-keywords="United States">United States</option>
<option value="uk" data-keywords="United Kingdom">United Kingdom</option>
<option value="ca" data-keywords="Canada">Canada</option>
<option value="au" data-keywords="Australia">Australia</option>
<option value="de" data-keywords="Germany">Germany</option>
<option value="fr" data-keywords="France">France</option>
<option value="jp" data-keywords="Japan">Japan</option>
<option value="br" data-keywords="Brazil">Brazil</option>
</select></uk-select></div>
</div>
</fieldset>
</form>
</main>
</body>
</html>Possible Solution:
A possible solution could be to always have the searchbar be right above the clickable select, and have the options appear above it - so the drop would shrink towards the button instead of upwards.
Source: franken-ui/ui