onKeyDown and ref is not supported

[sreeragrnandan]

I am trying to build a web app my use case includes:
Detect the key pressed by the user in the HighlightWithinTextarea component
give a ref or Id to the component.

but the component is not supporting onKeyDown and ref.

My samplecode:
`
.....
const inputAreaRef = useRef(null);
......

<HighlightWithinTextarea
value={userInput}
type="text"
id="inputArea"
tabIndex="0"
highlight={highlight}
onChange={onChange2}
ref={inputAreaRef}
contentEditable="true"
onKeyDown={() => alert("key pressed")}
className="input"
/>
......
`

[bonafideduck]

This code, its props,and the docs need to be updated to support all these draftjs props.

I am not sure what I’m doing wrong with the forwardref that ref isn’t working.

I’m not certain how soon I’ll get to this.

[mirkolenz]

I am currently faced with the same issue. I would like to have callbacks for onFocus and onBlur, but because of the reason you specified this is currently not possible. I tried to work around this by changing the onfocus callback of the underlying input directly, but that did not work either. In case you are interested, here is my non-working hack:

<HighlightWithinTextarea
  value={value}
  onChange={onChange}
  ref={(elem) => {
    if (elem !== null) {
      elem.onfocus = () => {
        alert("Test");
      };
    }
  }}
/>

[mirkolenz]

Also, I just noticed that Material UI is complaining about the same issue when using HighlightWithinTextarea as a custom input component:

InputBase.js:258 MUI: You have provided a `inputComponent` to the input component that does not correctly handle the `ref` prop.
Make sure the `ref` prop is called with a HTMLInputElement.

[bonafideduck]

@mirkolenz , RHWTA runs on top of DraftJs. I've blindly pushed out its properties in 3.0.0-alpha. You may be able to use handleKeyCommand(). I've also potentially fixed a ref propagation issue.

[mirkolenz]

Thank you so much, I will test it in my app next week. Would you be able to push the source code to GitHub? I am curious to see what specifically you changed about the forward ref.

[bonafideduck]

https://github.com/bonafideduck/react-highlight-within-textarea/tree/v3.0.0-alpha

For the forward ref, the change was that I had stuck a class component before the functional component to get it working with codesandbox and forgot to pass the ref through.

[bonafideduck]

@sreeragrnandan sreeragrnandan, @mirkolenz I'm currently in a typescript quagmire. So for you, I dropped the typescript work and made the changes that I hope will fix your two issues. (I haven't tested it beyond checking that it passed a standard sanity test). Please try version 3.0.2-alpha.

[mirkolenz]

Thank you so much for looking into this issue. I could however not test out the new version as it now has React 18.1.0 as a peer dependency. Some of my other dependencies only work with React 17.x, thus I am not able to install RHWT.

[bonafideduck]

I’ll look into mimicking Draftjs this weekend:

"peerDependencies": {
"react": ">=0.14.0",
"react-dom": ">=0.14.0"
},

[bonafideduck]

Version 3.0.3-alpha has been pushed.

[mirkolenz]

I just gave version 3.0.3-alpha a try and so far it works great! The ref is now properly forwarded, I do not get errors about this anymore. I am also able to use onFocus and onBlur without any issues. There are however three warnings logged in my console related to some prop types:

• Warning: Failed prop type: ForwardRef: prop type readOnly is invalid; it must be a function, usually from the prop-types package, but received undefined. This often happens because of typos such as PropTypes.function instead of PropTypes.func.
• Warning: Failed prop type: ForwardRef: prop type spellCheck is invalid; it must be a function, usually from the prop-types package, but received undefined. This often happens because of typos such as PropTypes.function instead of PropTypes.func.
• Warning: Failed prop type: ForwardRef: prop type stripPastedStyles is invalid; it must be a function, usually from the prop-types package, but received undefined. This often happens because of typos such as PropTypes.function instead of PropTypes.func.

[bonafideduck]

@mirkolenz , I misspelled PropTypes.bool as PropTypes.boolean. 3.0.4-alpha has that updated code.

I will likely create a new 2.x.x version for this and port it to the 3.x.x when I have typescript ready. But publishing to 2.x.x will require documentation updates too. So for now, I'm leaving this in 3.0.4-apha.

[mirkolenz]

Thank you for the fast iterations! I just installed version 3.0.4 and all three warnings have vanished. Have a nice Sunday!

[mrzmyr]

onKeyDown is now supported through #143

@bonafideduck any estimates for the release?

cc @mirkolenz

[bonafideduck]

@mrzmyr I've pushed 2.2.0 out to NPM. I didn't label it with "latest" with the hope that will force people to eplicitly select it, so you may have to explicitly set it instead of doing an update.

[bonafideduck]

There is also a 3.0.4-alpha.7 that is a complete redo of the underlying build facilities.

[bonafideduck]

@mrzmyr @mirkolenz @sreeragrnandan I have released version 3.1.0. I haven't given it the tag of latest, so currently you have to specify version with yarn add because that will still give the 2.0 train. Please let me know on each of your bugs if this now works properly.

[bonafideduck]

Closing I've switched 3.1.0 to be the latest.

[mirkolenz]

Hi @bonafideduck. Sorry for my late reply, I have been quite busy with another project lately. I just updated the dependency to ^3.1.0 and so far did not observe any bugs.

Thank you very much for the effort put into these features and keep up your great work!

[bonafideduck]

🎊