Salesforce LWC移动端lightning-input(date类型)尺寸交互异常问题

问题描述 #

在Salesforce移动端使用LWC的lightning-input组件（type="date"）时，通过自定义CSS类或内联样式设置宽度（如width:100%、width:500px）后，组件视觉显示正常，但仅左侧区域可点击触发交互。该问题仅出现在移动端的date类型组件上，text类型组件及桌面端无此异常。

原始组件代码：

<lightning-input
   required
   type="date"
   lang="en_gb"
   label={labels.testDate}
   value={data.testDate}
   data-name="testDate"
   data-validation-name="datafield"
   onchange={handleDataChange}
>
</lightning-input>

解决方案 #

• 避免直接给lightning-input设置宽度
  Salesforce基础组件内部包含多层嵌套结构，直接给根元素设置宽度会导致内部的交互触发层（如原生日期选择器的点击区域）无法同步适配宽度，从而出现视觉和交互区域不匹配的问题。

• 通过外层容器控制宽度（推荐）
  在外层添加一个容器元素，给容器设置宽度样式，让lightning-input自动继承容器宽度，这样内部的交互区域也能正确适配容器尺寸。
  示例代码：

  <div class="date-input-wrapper">
      <lightning-input
         required
         type="date"
         lang="en_gb"
         label={labels.testDate}
         value={data.testDate}
         data-name="testDate"
         data-validation-name="datafield"
         onchange={handleDataChange}
      >
      </lightning-input>
  </div>
  

  对应的CSS：

  .date-input-wrapper {
      width: 100%; /* 或你需要的固定宽度值 */
  }
  

• 使用SLDS内置布局类
  利用Salesforce Lightning Design System（SLDS）的布局类（如slds-size_1-of-1、slds-size_2-of-3等）来控制宽度，既符合官方设计规范，又能避免组件内部样式冲突。
  示例代码：

  <div class="slds-size_1-of-1">
      <lightning-input
         required
         type="date"
         lang="en_gb"
         label={labels.testDate}
         value={data.testDate}
         data-name="testDate"
         data-validation-name="datafield"
         onchange={handleDataChange}
      >
      </lightning-input>
  </div>
  

内容的提问来源于stack exchange，提问作者Adrian Lolans