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.

Sign up for GitHub

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

Jump to bottom

All Form input fields should implement forwardRef and give us access to internal input element. #5564

Closed

1 task done

Chris3y opened this issue Oct 19, 2022 · 2 comments · Fixed by #5726

Labels

Enhancement On Backlog released

Chris3y commented Oct 19, 2022

Desired behaviour

This would be very convenient for legitimate cases where one must interact with the DOM directly, such as focusing or selecting text in a form input (also important for Sage 200, due to third party integration requirements).

Before switching to function components, this was loosely supported. Class components will always return something to a ref so we could use that the then find the DOM input (see sandbox). It would be nice if all input elements were forwarded refs as a matter of course.

From React docs:

When to Use Refs

There are a few good use cases for refs:

Managing focus, text selection, or media playback.
Triggering imperative animations.
Integrating with third-party DOM libraries.

Current behaviour

Currently, there's no implementation of forwardRef in the components so any ref passed will always be undefined.

Suggested Solution

wrap every form input in forwardRef and pass the ref down to the form input.

CodeSandbox or Storybook URL

https://codesandbox.io/s/can-can-focus-on-old-versions-9rn9mb?file=/src/index.js

Anything else we should know?

Here's a different sandbox, showing what I'm trying to do. Other sandbox contains example of how we used to achieve this when things were class based (using the findDomNode escape hatch which is now discouraged).
https://codesandbox.io/s/kind-browser-ps90bb?file=/src/index.js

Confidentiality

I confirm there is no confidential or commercially sensitive information included.

Chris3y added Enhancement triage labels

Contributor

Parsium commented Oct 25, 2022

FE-5505

Parsium added On Backlog and removed triage labels

robinzigmond added a commit that referenced this issue


          feat(checkbox): use React.forwardRef and deprecate inputRef prop

6aeb609

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(radio-button): deprecate inputRef prop

e0836d1

the `inputRef` prop is not required on RadioButton as the component uses `React.forwardRef` to pass
a `ref` down to the underlying element

re #5564

robinzigmond added a commit that referenced this issue


          feat(switch): use React.forwardRef and deprecate inputRef prop

b5f9882

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(textbox): use React.forwardRef and deprecate inputRef prop

2c1f820

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(date): use React.forwardRef and deprecate inputRef prop

b047211

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(date-range): add startRef and endRef props

10ea4a1

These new props allow React refs (callback or object) to be provided to access the underlying DOM
elements of both date inputs if needed.

re #5564

robinzigmond added a commit that referenced this issue


          feat(decimal): useReact.forwardRef and deprecate inputRef prop

9f4f4ce

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(grouped-character): use React.forwardRef and deprecate inputRef …

611d3a8

…prop

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(number): use React.forwardRef and deprecate inputRef prop

0b2781c

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(search): use React.forwardRef and deprecate inputRef prop

1b5de36

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(textarea): use React.forwardRef and deprecate inputRef prop

e6582ae

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(tile-select): use React.forwardRef and deprecate inputRef prop

472a35a

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(numeral-date): add props to give refs to each input

03d69fa

add new props `dayRef`, `monthRef` and `yearRef` to pass a React ref (object or function) to any of
the inputs making up the component

re #5564

robinzigmond mentioned this issue

Fe 5505 add forwardref #5726

Merged

14 tasks

robinzigmond added a commit that referenced this issue


          feat(search): use React.forwardRef and deprecate inputRef prop

95c96b4

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(textarea): use React.forwardRef and deprecate inputRef prop

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(tile-select): use React.forwardRef and deprecate inputRef prop

7ff69a2

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(numeral-date): add props to give refs to each input

f86266b

add new props `dayRef`, `monthRef` and `yearRef` to pass a React ref (object or function) to any of
the inputs making up the component

re #5564

robinzigmond added a commit that referenced this issue


          feat(number): use React.forwardRef and deprecate inputRef prop

23fac7e

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(search): use React.forwardRef and deprecate inputRef prop

f73799c

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(textarea): use React.forwardRef and deprecate inputRef prop

ea5f27a

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(tile-select): use React.forwardRef and deprecate inputRef prop

1a8c58e

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(numeral-date): add props to give refs to each input

2d86d0e

add new props `dayRef`, `monthRef` and `yearRef` to pass a React ref (object or function) to any of
the inputs making up the component

re #5564

robinzigmond added a commit that referenced this issue


          feat(checkbox): use React.forwardRef and deprecate inputRef prop

fa9d56e

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(radio-button): deprecate inputRef prop

34bf227

the `inputRef` prop is not required on RadioButton as the component uses `React.forwardRef` to pass
a `ref` down to the underlying element

re #5564

robinzigmond added a commit that referenced this issue


          feat(switch): use React.forwardRef and deprecate inputRef prop

774c31b

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(textbox): use React.forwardRef and deprecate inputRef prop

0728a56

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(date): use React.forwardRef and deprecate inputRef prop

0fa4977

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(date-range): add startRef and endRef props

cb6e65f

These new props allow React refs (callback or object) to be provided to access the underlying DOM
elements of both date inputs if needed.

re #5564

robinzigmond added a commit that referenced this issue


          feat(decimal): useReact.forwardRef and deprecate inputRef prop

4b86730

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(grouped-character): use React.forwardRef and deprecate inputRef …

c2828de

…prop

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(number): use React.forwardRef and deprecate inputRef prop

4d85bcf

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(search): use React.forwardRef and deprecate inputRef prop

2cd05f8

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(textarea): use React.forwardRef and deprecate inputRef prop

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(tile-select): use React.forwardRef and deprecate inputRef prop

beff97b

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(numeral-date): add props to give refs to each input

8a6efce

add new props `dayRef`, `monthRef` and `yearRef` to pass a React ref (object or function) to any of
the inputs making up the component

re #5564

robinzigmond added a commit that referenced this issue


          feat(checkbox): use React.forwardRef and deprecate inputRef prop

9817fe6

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(radio-button): deprecate inputRef prop

171daa7

the `inputRef` prop is not required on RadioButton as the component uses `React.forwardRef` to pass
a `ref` down to the underlying element

re #5564

robinzigmond added a commit that referenced this issue


          feat(switch): use React.forwardRef and deprecate inputRef prop

e2f2945

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(textbox): use React.forwardRef and deprecate inputRef prop

17c9e2e

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(date): use React.forwardRef and deprecate inputRef prop

fdaf540

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(date-range): add startRef and endRef props

656662e

These new props allow React refs (callback or object) to be provided to access the underlying DOM
elements of both date inputs if needed.

re #5564

robinzigmond added a commit that referenced this issue


          feat(decimal): useReact.forwardRef and deprecate inputRef prop

d1876d3

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(grouped-character): use React.forwardRef and deprecate inputRef …

3737d54

…prop

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(number): use React.forwardRef and deprecate inputRef prop

8d0215d

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(search): use React.forwardRef and deprecate inputRef prop

832c44d

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(textarea): use React.forwardRef and deprecate inputRef prop

afce55f

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(tile-select): use React.forwardRef and deprecate inputRef prop

774aa1a

allow a `ref` to be passed directly to the component, removing the need for the `inputRef` prop
which is now deprecated

re #5564

robinzigmond added a commit that referenced this issue


          feat(numeral-date): add props to give refs to each input

df20e7d

add new props `dayRef`, `monthRef` and `yearRef` to pass a React ref (object or function) to any of
the inputs making up the component

re #5564

robinzigmond closed this as completed in #5726

carbonci pushed a commit that referenced this issue


          chore(release): 114.8.0

2cc22b1

## [114.8.0](v114.7.1...v114.8.0) (2023-02-03)

### Features

* **checkbox:** use React.forwardRef and deprecate inputRef prop ([9817fe6](9817fe6)), closes [#5564](#5564)
* **date-range:** add startRef and endRef props ([656662e](656662e)), closes [#5564](#5564)
* **date:** use React.forwardRef and deprecate inputRef prop ([fdaf540](fdaf540)), closes [#5564](#5564)
* **decimal:** useReact.forwardRef and deprecate inputRef prop ([d1876d3](d1876d3)), closes [#5564](#5564)
* **grouped-character:** use React.forwardRef and deprecate inputRef prop ([3737d54](3737d54)), closes [#5564](#5564)
* **number:** use React.forwardRef and deprecate inputRef prop ([8d0215d](8d0215d)), closes [#5564](#5564)
* **numeral-date:** add props to give refs to each input ([df20e7d](df20e7d)), closes [#5564](#5564)
* **radio-button:** deprecate inputRef prop ([171daa7](171daa7)), closes [#5564](#5564)
* **search:** use React.forwardRef and deprecate inputRef prop ([832c44d](832c44d)), closes [#5564](#5564)
* **select:** deprecate inputRef prop ([708cd10](708cd10))
* **switch:** use React.forwardRef and deprecate inputRef prop ([e2f2945](e2f2945)), closes [#5564](#5564)
* **textarea:** use React.forwardRef and deprecate inputRef prop ([afce55f](afce55f)), closes [#5564](#5564)
* **textbox:** use React.forwardRef and deprecate inputRef prop ([17c9e2e](17c9e2e)), closes [#5564](#5564)
* **tile-select:** use React.forwardRef and deprecate inputRef prop ([774aa1a](774aa1a)), closes [#5564](#5564)

### Bug Fixes

* remove internal use of inputRef prop in components ([3745ade](3745ade))

Collaborator

carbonci commented Feb 3, 2023

🎉 This issue has been resolved in version 114.8.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

carbonci added the released label

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment