fix(verification-code): fix focus is not a function error

[Jon-a-than]

Types of changes

• [ ] New feature
• [x] Bug fix
• [ ] Enhancement
• [ ] Component style change
• [ ] Typescript definition change
• [ ] Documentation change
• [ ] Coding style change
• [ ] Refactoring
• [ ] Test cases
• [ ] Continuous integration
• [ ] Breaking change
• [ ] Others

Background and context

• [email protected]
• @arco-design/[email protected]

Solution

inputRefList?.value[index].focus(); -> inputRefList?.value[index]?.inputRef?.focus();

How is the change tested?

Changelog

Component	Changelog(CN)	Changelog(EN)	Related issues
verification-code	修复按下删除键时 focus 未定义错误	Fixed the error that focus was not defined when the delete key was pressed

Checklist:

• [x] Test suite passes (npm run test)
• [x] Provide changelog for relevant changes (e.g. bug fixes and new features) if applicable.
• [x] Changes are submitted to the appropriate branch (e.g. features should be submitted to feature branch and others should be submitted to main branch)

Other information

[codesandbox[bot]]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders
Open Preview

[Jon-a-than]

我复现了这个错误的原因：

由于 ArcoInput 组件使用 options API 的 methods 提供的 blur 与 focus 方法,所以当我配置将 options api 禁用后就无法获取到focus方法了 (上图左侧为关闭options api, 右侧开启 options api)。

这个错误应当在 Input 组件中的 setup 方法中 return focus 与 blur 方法来替换使用 methods 声明。

但可能很多组件使用 options api methods 来暴露组件方法，也许要在文档中说明不要关闭 options api。

// https://vitejs.dev/config/
export default defineConfig({
  define: {
    __VUE_OPTIONS_API__: false
  },
})

Issue: #2699

[oljc]

我复现了这个错误的原因：

由于 ArcoInput 组件使用 options API 的 methods 提供的 blur 与 focus 方法,所以当我配置将 options api 禁用后就无法获取到focus方法了 (上图左侧为关闭options api, 右侧开启 options api)。

这个错误应当在 Input 组件中的 setup 方法中 return focus 与 blur 方法来替换使用 methods 声明。

但可能很多组件使用 options api methods 来暴露组件方法，也许要在文档中说明不要关闭 options api。

// https://vitejs.dev/config/

export default defineConfig({

  define: {

    __VUE_OPTIONS_API__: false

  },

})

Issue: #2699

@Jon-a-than 感谢这个补充能够更好的复现和排查问题原因🙏🏻这个选项配置问题在 vue 文档中有明确说明可能会影响选项式 API兼容性。 组件库现在可能应该需要考虑完善组件expose ps：你这个PR只解决了不报错但是没有解决聚焦问题？

[Jon-a-than]

我复现了这个错误的原因： 由于 ArcoInput 组件使用 options API 的 methods 提供的 blur 与 focus 方法,所以当我配置将 options api 禁用后就无法获取到focus方法了 (上图左侧为关闭options api, 右侧开启 options api)。 这个错误应当在 Input 组件中的 setup 方法中 return focus 与 blur 方法来替换使用 methods 声明。 但可能很多组件使用 options api methods 来暴露组件方法，也许要在文档中说明不要关闭 options api。

// https://vitejs.dev/config/

export default defineConfig({

  define: {

    __VUE_OPTIONS_API__: false

  },

})

Issue: #2699

@Jon-a-than 感谢这个补充能够更好的复现和排查问题原因🙏🏻这个选项配置问题在 vue 文档中有明确说明可能会影响选项式 API兼容性。 组件库现在可能应该需要考虑完善组件expose ps：你这个PR只解决了不报错但是没有解决聚焦问题？

感谢回复😽， 我的PR只解决了该组件兼容关闭 options API 的功能，因为在 ArcoInput 组件的 setup 方法中提供了 inputRef 即 html input 元素的引用，所以可以在关闭 options API 功能时, 使用 ArcoInput 提供的 inputRef 获取到 input 元素来 focus。

但是原先的设计应该是父组件使用 ArcoInput 组件中 methods 提供的 foucs 方法而不是直接调用 input 元素的 focus ？

所以我尝试修改 input 组件使其在关闭选项 api 时也照常提供 focus 与 blur 方法, 虽然按下图这样修改可以实现兼容的功能并通过了所有的测试(calendar组件除外)，但是该项目的组件文档功能依赖于 methods 中的注释，可能是我的疏忽，我没有找到怎么在 setup 的返回值或者 expose 中声明组件文档的功能。

另外如果要全组件都实现兼容关闭 options api 的功能，可能需要将 methods 中的方法全部移至 setup return中或者使用 expose

[flsion]

@Jon-a-than 这部分属于历史问题了，开发时还没有 expose 功能。目前类似情况全部迁移至 expose 更合适，这个问题我来统一看一下，涉及到类似问题的组件可能有一些。