API加载form-control选项时form-floating浮动标签失效问题问询

问题根源 #

Bootstrap form-floating 的标签浮动逻辑默认依赖两个状态判断：输入框聚焦、或输入框的placeholder处于未显示状态（即输入框有值）。绑定API数据源后标签默认上浮，本质是你用的dmx-autocomplete组件在初始化/绑定API数据时，修改了输入框的value属性、或者触发了输入事件，导致CSS误判输入框已有内容。

解决方案 #

方案1：修复组件初始化触发的状态异常

在API数据加载完成、autocomplete组件初始化完成的回调中，手动重置输入框的状态即可：

// 可绑定到你框架的API加载完成事件钩子中执行
const cityInput = document.getElementById('inp_city');
// 仅当输入框无实际内容时重置状态
if (cityInput.value.trim() === '') {
  cityInput.value = '';
  cityInput.dispatchEvent(new Event('input'));
}

如果你用的无代码框架支持事件配置，直接把这段逻辑绑定到getCities接口的loaded事件触发即可。

方案2：自定义CSS覆盖默认浮动规则

如果不方便修改组件逻辑，直接加以下CSS强制对齐预期效果：

/* 仅当输入框聚焦、或有非空内容时，标签才保持上浮 */
.form-floating > .form-control:not(:focus):placeholder-shown ~ label,
.form-floating > .form-control[value=""]:not(:focus) ~ label {
  opacity: 0.65;
  transform: scale(1) translateY(0);
  pointer-events: none;
}

方案3：延迟绑定API数据源

避免组件初始化时空数据触发状态变更，修改输入框的数据源绑定逻辑，等接口加载完成后再绑定数据：

<!-- 原dmx-bind:data修改为条件绑定，接口加载完成前传入空数组 -->
<input 
  type="text" 
  class="form-control" 
  id="inp_city" 
  name="city" 
  aria-describedby="inp_city_help" 
  placeholder="Enter nearest capital city" 
  is="dmx-autocomplete" 
  dmx-bind:data="getCities.loaded ? getCities.data.getCities : []" 
  optiontext="cityIANA" 
  optionvalue="cityIANA"
>

内容的提问来源于stack exchange，提问作者Fred K