ant-design / ant-design-mobile

Essential UI blocks for building mobile web apps.
https://mobile.ant.design
MIT License
11.51k stars 2.38k forks source link

表单项点击label文字时,能否不自动定焦表单 #6548

Closed yeesunday closed 4 months ago

yeesunday commented 4 months ago

Version of antd-mobile

5.34.0

Operating system and its version

No response

Browser and its version

No response

Sandbox to reproduce

https://codesandbox.io/p/sandbox/clever-sky-q4t5wl

What happened?

image

如图,我想点击帮助icon查看提示信息,结果激活了表单,底下弹出了轮盘把提示信息遮挡了

Relevant log output

No response

damonyoungcc commented 4 months ago

这里似乎源码没有阻止冒泡,看下要不要修这个bug

  const labelElement = !!label && (
    <label className={`${classPrefix}-label`} htmlFor={htmlFor}>
      {label}
      {requiredMark}
      {help && (
        <Popover content={help} mode='dark' trigger='click'>
          <span
            className={`${classPrefix}-label-help`}
            onClick={e => {
              // 这里源码没有阻止冒泡
              e.preventDefault()
            }}
          >
            <QuestionCircleOutline />
          </span>
        </Popover>
      )}
    </label>
  )

或者还有一个办法,你可以传一个定制的label进去,不要用help属性,把label定制成你想要的文本和图标,然后图标点击事件的时候阻止冒泡

yeesunday commented 4 months ago

@damonyoungcc 感谢回复~自定义 label 这个方案在业务里可能不太行,因为我是通过 form-render-mobile 生成的表单。从 antd mobile 库本身修复会更合适,其他用户应该也有类似问题