Skip to content

♻️ refactor: useMergeRefs / コンテナフォーカスロジックを named export してほしい(Input系 で再利用するため) #263

@hirokibaba-hash

Description

@hirokibaba-hash

背景

InputSearch を実装するにあたり、Inputsrc/components/ui/input/index.tsx)が内部で使っている以下のロジックを再利用したい。

  • useMergeRefs(または同等の ref マージ処理): 複数の ref を1つにまとめるロジック。InputSearch では外部 ref と内部 innerRef を同時に扱うために自前実装している
  • コンテナクリックフォーカスロジック(handleContainerClick 相当): コンテナの余白部分クリック時に内部の <input> へフォーカスを移す処理

現状これらは Inputindex.tsx 内にローカル実装されており、named export されていないため、internal 側から import できない。

提案

以下のいずれかの対応をお願いしたい。

  1. useMergeRefssrc/hooks/useMergeRefs.ts(または同等のパス)に切り出して named export する
  2. コンテナクリックフォーカスロジックを useInputContainerFocus のような hook として切り出して named export する

InputSearch 側の暫定対応

InputSearchにて自前実装済み。

  • combinedRef: callback ref パターンで外部 ref と内部 ref をマージ
  • handleContainerClick: ボタン要素を除外しつつ input にフォーカスを移す

本 issue で対応がリリースされたら、自前実装を削除して import に切り替える別 PR を立てる予定。

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions