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

Block Editor: Fix typo in URLInput's onKeyDown prop documentation #56322

Merged
merged 1 commit into from Nov 21, 2023

Conversation

chiilog
Copy link
Contributor

@chiilog chiilog commented Nov 20, 2023

What?

This pull request updates the URLInput component to correctly handle keyboard events. The prop onKeydown is changed to onKeyDown to ensure that keyboard events are captured as intended.

Why?

While using the URLInput component, I noticed that the onKeydown function was not triggered upon key presses. After investigating, I found that the correct React prop should be onKeyDown. This change is necessary for the component to respond to keyboard events.

not work

<URLInput
	value={ link || '' }
	onChange={ ( value ) =>
		onSetLinkHandler( value )
	}
	onKeydown={ (
		event: KeyboardEvent
	) => {
		console.log( event );
	} }
/>

work

<URLInput
	value={ link || '' }
	onChange={ ( value ) =>
		onSetLinkHandler( value )
	}
-	onKeydown={ (
+	onKeyDown={ (
		event: KeyboardEvent
	) => {
		console.log( event );
	} }
/>

How?

The change is a simple update in the component's props, replacing onKeydown with onKeyDown. This aligns with the standard React event naming conventions and ensures that the component's event handling functions as expected.

Testing Instructions

  1. Open a post or page within the Gutenberg editor.
  2. Insert a block that utilizes the URLInput component.
  3. Try using the keyboard with the URLInput component and observe if the onKeyDown event is fired (you can check this using console logs or any other debugging method).
  4. Ensure no other functionalities are impacted by this change.

Testing Instructions for Keyboard

To test using only the keyboard:

  1. Focus on the URLInput component using the Tab key.
  2. Press various keys to see if the onKeyDown event captures them (as indicated by console logs or other means).

Screenshots or screencast

Before: onKeydown
After: onKeyDown
@DAreRodz DAreRodz added [Type] Developer Documentation Documentation for developers [Package] Block editor /packages/block-editor labels Nov 20, 2023
@DAreRodz DAreRodz changed the title Update README.md to fix the typo Block Editor: Fix typo in URLInput's onKeyDown prop documentation Nov 20, 2023
Copy link
Contributor

@DAreRodz DAreRodz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indeed, properties should be documented in the correct case. Thanks for the fix, @chiilog. 😊

@t-hamano t-hamano merged commit a8de73d into WordPress:trunk Nov 21, 2023
50 of 51 checks passed
@github-actions github-actions bot added this to the Gutenberg 17.2 milestone Nov 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Block editor /packages/block-editor [Type] Developer Documentation Documentation for developers
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants