Fix modals in react #11714

stacey-gammon · 2017-05-10T19:39:01Z

Need to do it in a timeout because ng-react hasn’t loaded the react
code yet, so it can’t find the buttons.

Added tests which would have caught the issue, but also ended up switching the default button for deleting dashboards since it should be the non-destructive option by default.

ycombinator · 2017-05-11T21:29:27Z

Functionality LGTM. Reviewing code...

ycombinator

The use of $timeout is clever but seems a bit hacky. Is this a well-understood pattern when using ng-react?

stacey-gammon · 2017-05-15T13:44:33Z

I agree it's hacky @ycombinator, unfortunately I couldn't come up with any other solution. I also couldn't find any approved pattern for this type of thing, with ng-react. The timeout just happened to work.

I added a comment, mentioning the limitations of the solution. If you have any other ideas, I'm open to exploring them. @weltenwort -- since you have some more experience with ng-react, have you ever come across this type of situation before, and maybe have a better solution?

weltenwort · 2017-05-15T14:00:04Z

Focus management in React is not an easy topic, because setting the focus is a document-global effect and as such not covered by the React API.

I guess this cannot be achieved using the html autofocus attribute due to browser compatibility? In that case I would recommend to handle it in the componentDidMount lifecycle hook of the React component, in which the refs are already valid.

If you allow for an additional comment, the current use of data-test-subj in production code feels wrong to me. We should use some other class/attribute for that (in a previous project we used js- prefixed classes to make javascript dependencies easily searchable).

(For completely redux-based apps I would treat focus management as a side-effect in a middleware.)

stacey-gammon · 2017-05-15T16:26:22Z

Oh much better idea @weltenwort - pushing the focusing logic into react - thanks!

cc @cjcenizal just FYI, I had to make KuiButton a class instead of a functional component for refs to work.

stacey-gammon · 2017-05-15T16:37:32Z

Took it a step farther and also moved the esc key handling to the react component.

ycombinator · 2017-05-16T13:23:02Z

just FYI, I had to make KuiButton a class instead of a functional component for refs to work.

@stacey-gammon I was reading https://facebook.github.io/react/docs/refs-and-the-dom.html to understand refs and came across this statement:

You can, however, use the ref attribute inside a functional component as long as you refer to a DOM element or a class component.

Since you are adding a ref to the button element, I think you can leave the KuiButton component as a functional component?

stacey-gammon · 2017-05-16T13:58:51Z

I think what that means is that I can use ref inside of a functional component e.g. this:

<button
  ref={ (kuiButton) => { this.kuiButton = kuiButton; } }
/>

but I still can't do this:

    <KuiButton
           type="hollow"
             data-test-subj="confirmModalCancelButton"
             ref={ (button) => { this.cancelButton = button; } }
             onClick={ onCancel }
           >

Without making KuiButton a class. In the second example, button comes back null when KuiButton is a functional component.

ycombinator · 2017-05-16T14:00:38Z

Argh, I totally missed the use of ref on the KuiButton component. I only saw the use inside it on button. Oops!

ycombinator

Functionally (still) LGTM. Left a few minor comments on the code.

ycombinator · 2017-05-16T14:15:31Z

ui_framework/components/modal/confirm_modal.js

-      </KuiModalFooter>
-    </KuiModal>
-  );
+export const CONFIRM_MODAL_BUTTONS = [


From what I can tell this const is only used within this module, as part of setting KuiConfirmModal.propTypes. Does it need to be exported?

ycombinator · 2017-05-16T14:18:56Z

ui_framework/components/modal/confirm_modal.js

+    super(props);
+
+    this.confirmButton;
+    this.cancelButton;


I think your intent behind these two lines was to clarify that these are properties of this object. For consistency, I think we should either do the same thing for this.kuiButton in the KuiButton component class or remove these two lines from here.

Also, if we choose to leave these here, I'd suggest initializing them explicitly to something like null. Otherwise their intent is not as clear, IMO.

ycombinator · 2017-05-16T14:22:07Z

ui_framework/components/modal/confirm_modal.js

+
+  onKeyDown = (event) => {
+    // Treat the 'esc' key as a cancel indicator.
+    if (event.keyCode === 27) {


I know this isn't part of this PR, but how do you feel about making the 27 here a constant somewhere? I see it used multiple times in the code so it might be nice for it to be defined once and then referred to as ESCAPE_KEY_CODE or something like that.

I suggest creating a keyboard module in services.

I added a key_codes.js file in services that exports the consts individually. You think it should be something like this instead:

keyboard.js:

export const KeyCodes = { ESC_KEY: 27 };

I'm fine with either approach.

key_codes.js works too!

Need to do it in a timeout because ng-react hasn’t loaded the react code yet, so it can’t find the buttons.

that would have caught the issue, and also change the default focused button for the listing delete page since it’s a destructive action.

They don’t pass, I’m guessing because of the way it’s triggered, but these test cases should now be handled in jest. Also confirmed it works as expected with the modal.

stacey-gammon · 2017-05-16T18:11:40Z

So, I investigated autofocus a little more as an option because of the comments in this PR: #10925. It's supported in all the browsers we support, just not a couple mobile browsers, in which case, it's really not that important because the user needs to use the touch screen to press the right button anyway.

cjcenizal · 2017-05-16T18:20:10Z

I've created an issue for making our Modals accessible: #11823. I don't think we need to implement this in this PR, but we should keep it in mind

ycombinator

LGTM!

* fix focused button not being set Need to do it in a timeout because ng-react hasn’t loaded the react code yet, so it can’t find the buttons. * add a test that would have caught the issue, and also change the default focused button for the listing delete page since it’s a destructive action. * Add a comment * Push focusing of default button into react code * Push ESC key handling into react as well * Remove ESC tests in angular form They don’t pass, I’m guessing because of the way it’s triggered, but these test cases should now be handled in jest. Also confirmed it works as expected with the modal. * Address code review comments * Use autoFocus

stacey-gammon requested a review from ycombinator May 10, 2017 19:39

stacey-gammon added :Management review regression labels May 10, 2017

ycombinator reviewed May 11, 2017

View reviewed changes

stacey-gammon force-pushed the fix-modals-in-react branch from c6ef171 to 59b60df Compare May 15, 2017 13:40

stacey-gammon force-pushed the fix-modals-in-react branch from 59b60df to a7a61df Compare May 15, 2017 14:03

stacey-gammon force-pushed the fix-modals-in-react branch from 423e8dd to 65efd42 Compare May 15, 2017 19:24

ycombinator self-requested a review May 16, 2017 12:32

ycombinator requested changes May 16, 2017

View reviewed changes

stacey-gammon added 8 commits May 16, 2017 14:11

fix focused button not being set

667eec8

Need to do it in a timeout because ng-react hasn’t loaded the react code yet, so it can’t find the buttons.

add a test

88cc2fe

that would have caught the issue, and also change the default focused button for the listing delete page since it’s a destructive action.

Add a comment

675a2a1

Push focusing of default button into react code

0d85769

Push ESC key handling into react as well

fabc74e

Remove ESC tests in angular form

455b3d9

They don’t pass, I’m guessing because of the way it’s triggered, but these test cases should now be handled in jest. Also confirmed it works as expected with the modal.

Address code review comments

9a530ba

Use autoFocus

5522050

stacey-gammon force-pushed the fix-modals-in-react branch from 81bcf43 to 5522050 Compare May 16, 2017 18:11

ycombinator approved these changes May 16, 2017

View reviewed changes

stacey-gammon added the v5.5.0 label May 17, 2017

stacey-gammon merged commit a9ee082 into elastic:master May 17, 2017

stacey-gammon mentioned this pull request May 17, 2017

Fix modals in react (#11714) #11862

Merged

jimgoodwin added the release_note:fix label Jun 26, 2017

stacey-gammon deleted the fix-modals-in-react branch October 24, 2017 13:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix modals in react #11714

Fix modals in react #11714

stacey-gammon commented May 10, 2017

ycombinator commented May 11, 2017

ycombinator left a comment

stacey-gammon commented May 15, 2017

weltenwort commented May 15, 2017 •

edited

Loading

stacey-gammon commented May 15, 2017

stacey-gammon commented May 15, 2017

ycombinator commented May 16, 2017 •

edited

Loading

stacey-gammon commented May 16, 2017

ycombinator commented May 16, 2017

ycombinator left a comment

ycombinator May 16, 2017

ycombinator May 16, 2017

ycombinator May 16, 2017

cjcenizal May 16, 2017

stacey-gammon May 16, 2017

cjcenizal May 16, 2017

stacey-gammon commented May 16, 2017

cjcenizal commented May 16, 2017

ycombinator left a comment

Fix modals in react #11714

Fix modals in react #11714

Conversation

stacey-gammon commented May 10, 2017

ycombinator commented May 11, 2017

ycombinator left a comment

Choose a reason for hiding this comment

stacey-gammon commented May 15, 2017

weltenwort commented May 15, 2017 • edited Loading

stacey-gammon commented May 15, 2017

stacey-gammon commented May 15, 2017

ycombinator commented May 16, 2017 • edited Loading

stacey-gammon commented May 16, 2017

ycombinator commented May 16, 2017

ycombinator left a comment

Choose a reason for hiding this comment

ycombinator May 16, 2017

Choose a reason for hiding this comment

ycombinator May 16, 2017

Choose a reason for hiding this comment

ycombinator May 16, 2017

Choose a reason for hiding this comment

cjcenizal May 16, 2017

Choose a reason for hiding this comment

stacey-gammon May 16, 2017

Choose a reason for hiding this comment

cjcenizal May 16, 2017

Choose a reason for hiding this comment

stacey-gammon commented May 16, 2017

cjcenizal commented May 16, 2017

ycombinator left a comment

Choose a reason for hiding this comment

weltenwort commented May 15, 2017 •

edited

Loading

ycombinator commented May 16, 2017 •

edited

Loading