Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
yeesunday opened this issue Feb 18, 2024 · 2 comments · Fixed by #6549
Closed

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

yeesunday opened this issue Feb 18, 2024 · 2 comments · Fixed by #6549
Labels

Comments

@yeesunday
Copy link

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

@yeesunday yeesunday added the bug label Feb 18, 2024
@damonyoungcc
Copy link
Collaborator

这里似乎源码没有阻止冒泡,看下要不要修这个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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants