Skip to content

Setting form editor has a formState to avoid focus lost #12470

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
Merged
echarles merged 4 commits into from
Apr 29, 2022
Merged

Setting form editor has a formState to avoid focus lost #12470

echarles merged 4 commits into from
Apr 29, 2022

Conversation

@echarles
Copy link
Member

@echarles echarles commented Apr 26, 2022

References

Fixes #12160

Code changes

Use a dedicated class field to maintain the form state instead of the standard react state. This avoid rerendering and focus lost.

User-facing changes

Focus is no more lost.

Untitled4

Backwards-incompatible changes

None.

@jupyterlab-probot
Copy link

jupyterlab-probot bot commented Apr 26, 2022

Thanks for making a pull request to jupyterlab!
To try out this branch on binder, follow this link: Binder

@echarles echarles mentioned this pull request Apr 26, 2022
Closed
@fcollonval fcollonval added the bug label Apr 26, 2022
@fcollonval fcollonval added this to the 3.4.0 milestone Apr 26, 2022
fcollonval
fcollonval requested changes Apr 26, 2022
View reviewed changes
packages/settingeditor/src/SettingsFormEditor.tsx Outdated
super(props);
const { settings } = props;
this.state = {
this.formState = {
Copy link
Member

@fcollonval fcollonval Apr 26, 2022

Choose a reason for hiding this comment

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

The formData pass to Form is indeed only the initial value. So it makes sense to extract formData from the state. However isModified should be kept in the state otherwise the Restore to Defaults button does not appear when needed.

Copy link
Member Author

@echarles echarles Apr 26, 2022

Choose a reason for hiding this comment

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

Putting back isModified in the react state generate rendering and looses the focus (the Restore to Defaults button is show again).

I have tried alternative approaches #12160 (comment) without success.

Copy link
Member

@fcollonval fcollonval Apr 28, 2022

Choose a reason for hiding this comment

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

I opened datalayer-externals#3 with a better approach that only update props appropriately avoiding unnecessary component rerendering that were creating the focus lost.

Copy link
Member Author

@echarles echarles Apr 28, 2022

Choose a reason for hiding this comment

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

Awesome. I have merged your changes. Thx a bunch for this.

fcollonval
fcollonval requested changes Apr 28, 2022
View reviewed changes
fcollonval
fcollonval approved these changes Apr 29, 2022
View reviewed changes
Copy link
Member

@fcollonval fcollonval left a comment

Choose a reason for hiding this comment

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

Thanks @echarles

@echarles echarles merged commit 29b6cc7 into jupyterlab:master Apr 29, 2022
@echarles
Copy link
Member Author

echarles commented Apr 29, 2022

@meeseeksdev please backport to 3.4.x

meeseeksmachine pushed a commit to meeseeksmachine/jupyterlab that referenced this pull request Apr 29, 2022
@echarles @meeseeksmachine
Backport PR jupyterlab#12470: Setting form editor has a formState to …
3d86c36 
…avoid focus lost
@meeseeksmachine meeseeksmachine mentioned this pull request Apr 29, 2022
Merged
@echarles
Copy link
Member Author

echarles commented Apr 29, 2022

Thx @fcollonval for the reviews and helps. I have merged and the backport to 3.4.x is available on #12490

@echarles
Copy link
Member Author

echarles commented Apr 29, 2022

@fcollonval I am now testing master branch with this merge, and I face an issue. The settings editor does not open anymore (the json editor does).

I wonder how this is related to #12485 As mentioned on that issue, I faced the problem once those last days, but today it is 100% reproducible.

It looks like this code block is responsible for the UI not showing up. If I comment-out the block the editor is shown correctly (with the focus being not lost, which is good). If I refresh the page, the editor opens back again.

      if (tracker.currentWidget) {
        shell.activateById(tracker.currentWidget.id);
        return;
      }

@echarles echarles mentioned this pull request Apr 29, 2022
Closed
fcollonval pushed a commit that referenced this pull request Apr 29, 2022
@meeseeksmachine @echarles
Backport PR #12470: Setting form editor has a formState to avoid focu…
a34b511 
…s lost (#12490)

Co-authored-by: Eric Charles <eric@datalayer.io>
@github-actions
Copy link
Contributor

github-actions bot commented Apr 29, 2022

Benchmark report

The execution time (in milliseconds) are grouped by test file, test type and browser.
For each case, the following values are computed: min <- [1st quartile - median - 3rd quartile] -> max.

The mean relative comparison is computed with 95% confidence.

Results table
Test file large_code_notebook large_md_notebook
open
chromium
actual 18349 <- [19491 - 19995 - 20677] -> 22612 3285 <- [3400 - 3466 - 3551] -> 4200
expected 18246 <- [19346 - 19765 - 20346] -> 21715 3373 <- [3505 - 3579 - 3695] -> 4620
Mean relative change 1.3% ± 1.1% -4.4% ± 1.5%
switch-from
chromium
actual 736 <- [778 - 808 - 846] -> 1078 509 <- [563 - 577 - 600] -> 817
expected 721 <- [772 - 792 - 812] -> 981 535 <- [565 - 586 - 609] -> 800
Mean relative change 3.8% ± 2.1% -1.6% ± 3.0%
switch-to
chromium
actual 489 <- [532 - 567 - 589] -> 670 343 <- [367 - 381 - 391] -> 433
expected 447 <- [545 - 582 - 599] -> 659 345 <- [373 - 385 - 400] -> 457
Mean relative change -2.0% ± 1.9% -1.8% ± 1.5%
close
chromium
actual 1327 <- [1361 - 1392 - 1420] -> 1638 576 <- [608 - 625 - 649] -> 751
expected 1308 <- [1356 - 1378 - 1409] -> 1476 577 <- [617 - 633 - 655] -> 737
Mean relative change 1.1% ± 0.9% -0.9% ± 1.6%

Changes are computed with expected as reference.

@krassowski krassowski mentioned this pull request Jun 25, 2022
Closed
@krassowski krassowski mentioned this pull request Aug 7, 2022
Closed
@RRosio RRosio mentioned this pull request Aug 25, 2022
Closed
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Apr 30, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@fcollonval fcollonval fcollonval approved these changes

Assignees

@echarles echarles

Labels

bug pkg:settingeditor

Projects

None yet

Milestone

3.4.0

Development

Successfully merging this pull request may close these issues.

v3.3.0 settings new UI

2 participants

@echarles @fcollonval