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

Add a `type=submit` to the search suggestion buttons #18933

Merged
merged 1 commit into from Dec 5, 2019

Conversation

@talldan
Copy link
Contributor

talldan commented Dec 5, 2019

Description

Recently pressing enter to submit a url as a navigation link in the nav block stopped working. It looks like the LinkControlSearchItem previously relied on being a type="submit" button. It was recently changed to use the Button component, which has a default type="button". This PR changes it back to a submit button to restore the functionality.

How has this been tested?

e2e tests are being worked on in #18929, which is how this was discovered.

  1. Add a Navigation Block.
  2. Select 'Create empty'.
  3. Type a URL (e.g. 'https://wordpress.org') and press enter
  4. Expect that the URL is submitted.

Types of changes

Bug fix (non-breaking change which fixes an issue)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR. .
@talldan talldan requested review from ellatrix and youknowriad as code owners Dec 5, 2019
@talldan talldan self-assigned this Dec 5, 2019
@talldan talldan added this to 👀 PRs to review in Navigation block via automation Dec 5, 2019
@talldan talldan requested a review from noisysocks Dec 5, 2019
Copy link
Contributor

draganescu left a comment

Works perfectly!

@talldan talldan merged commit 391c225 into master Dec 5, 2019
2 checks passed
2 checks passed
pull-request-automation
Details
Travis CI - Pull Request Build Passed
Details
Navigation block automation moved this from 👀 PRs to review to ✅ Done Dec 5, 2019
@talldan talldan deleted the fix/enter-to-submit-nav-link branch Dec 5, 2019
@youknowriad youknowriad added this to the Gutenberg 7.1 milestone Dec 9, 2019
scruffian added a commit to scruffian/gutenberg that referenced this pull request Dec 10, 2019
@aduth

This comment has been minimized.

Copy link
Member

aduth commented Dec 10, 2019

When I click on a search result in the navigation block search suggestions, I see a console warning:

Form submission canceled because the form is not connected

I have also observed that this can cause end-to-end test failures:

FAIL packages/e2e-tests/specs/editor/blocks/navigation.test.js (5.528s)
  Adds Navigation links
    ✕ Should add a link with one click (4723ms)
  ● Adds Navigation links › Should add a link with one click
    expect(jest.fn()).not.toHaveWarned(expected)
    Expected mock function not to be called but it was called with:
    ["Form submission canceled because the form is not connected"]
      at Object.expect (../jest-console/build/@wordpress/jest-console/src/index.js:34:4)
          at runMicrotasks (<anonymous>)

I expect that since this button is also assigned an onClick handler, it may be conflicting with the behavior of onSubmit. To me, it would seem that the behavior of onClick should be handled in the form onSubmit handler or, conversely, there should be no onSubmit handler and we rely on onClick exclusively. In its current state, the two are prone to conflict.

@talldan

This comment has been minimized.

Copy link
Contributor Author

talldan commented Dec 11, 2019

@aduth Yep, I noticed that too and this bug when working on #18929. I've made a separate issue for it (#19056) and plan to pick it up once I work on a few of my PRs.

The root cause of this is a bit further in the past—previously these suggestions were using button elements that had an implicit type="submit". I think what's happening is that the form becomes unmounted by the onClick handler which causes the 'not connected' warning.

A fix could involve suggestions being handled by URLInput a bit like they are for the other style of suggestions:
https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/url-input/index.js#L143-L224

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.