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

fix: Popover in Multi select widget inside modals breaks away from the widget #13129

Merged
merged 36 commits into from
Jun 22, 2022

Conversation

wmdev0808
Copy link
Contributor

@wmdev0808 wmdev0808 commented Apr 20, 2022

Description

When I add a multi-select inside a modal with options exceeding the height to see a scroll. After reaching the end of the scroll the multi-select popover breaks away from the modal.

Fixes #12161
Fixes #11485

Type of change

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

How Has This Been Tested?

  • Test A
  • Test B

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes

Test coverage results 🧪

🟢 Total coverage has increased
// Code coverage diff between base branch:release and head branch: fix/12161-multiselects-broken-in-modal 
Status File % Stmts % Branch % Funcs % Lines
🟢 total 56.72 (0.01) 38.68 (0.01) 36.22 (0) 56.97 (0.01)
🔴 app/client/src/utils/autocomplete/TernServer.ts 52.71 (-0.23) 40.83 (-0.84) 36.21 (0) 56.74 (-0.25)
🔴 app/client/src/widgets/WidgetUtils.ts 82.56 (-0.25) 59.66 (-2.08) 64.52 (-2.15) 78.75 (-0.36)
🔴 app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx 15.12 (-0.61) 0 (0) 0 (0) 16.88 (-0.62)
🔴 app/client/src/widgets/MultiSelectWidget/component/index.tsx 18.84 (-0.6) 0 (0) 0 (0) 20 (-0.59)
🔴 app/client/src/widgets/MultiSelectWidgetV2/component/index.tsx 9.7 (-0.52) 0 (0) 0 (0) 10.92 (-0.56)
🔴 app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx 14.77 (-0.61) 0 (0) 0 (0) 16.46 (-0.61)

@wmdev0808 wmdev0808 added Bug Something isn't working Widgets Product This label groups issues related to widgets MultiSelect Widget Issues related to MultiSelect Widget MultiTree Select Widget Issues related to MultiTree Select Widget labels Apr 20, 2022
@wmdev0808 wmdev0808 self-assigned this Apr 20, 2022
@vercel
Copy link

vercel bot commented Apr 20, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
appsmith ✅ Ready (Inspect) Visit Preview Jun 22, 2022 at 1:45AM (UTC)

@github-actions github-actions bot added Medium Issues that frustrate users due to poor UX Needs More Info Needs additional information UI Building Pod labels Apr 20, 2022
@wmdev0808
Copy link
Contributor Author

/ok-to-test sha=43ca423

@github-actions
Copy link

Unable to find test scripts. Please add necessary tests to the PR.

@github-actions
Copy link

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/2194713642.
Workflow: Appsmith External Integration Test Workflow.
Commit: 43ca423.
PR: 13129.

@github-actions
Copy link

UI Performance test run logs and artifacts: https://github.com/appsmithorg/appsmith/actions/runs/2194713642.
Commit: 43ca423.
Results:

Click to view performance test results

Run 1 Run 2 Run 3 Run 4 Run 5 Median Mean SD.Sample SD.Population
SELECT_CATEGORY
scripting 919.83 785.56 713.12 633.06 771.74 771.74 764.66 13.80 12.34
painting 8.15 5.78 4.42 5.42 7.4 5.78 6.23 24.40 21.83
rendering 355.19 286.74 305.16 301.27 345.9 305.16 318.85 9.38 8.39
BIND_TABLE_DATA
scripting 2189.2 2248.66 2282.89 2380.74 2339.97 2282.89 2288.29 3.29 2.94
painting 23.73 12.03 18.74 27.5 23.05 23.05 21.01 28.08 25.13
rendering 761.51 655.63 653.95 683.28 688.11 683.28 688.5 6.34 5.67
CLICK_ON_TABLE_ROW
scripting 2383.39 1975.3 1912.1 2071.21 1877.48 1975.3 2043.9 9.96 8.91
painting 24.07 23.34 18.63 29.19 17.36 23.34 22.52 21.00 18.78
rendering 378.67 311.35 274.82 362.78 281.03 311.35 321.73 14.66 13.11
UPDATE_POST_TITLE
scripting 3337.21 3438.49 3276.64 2878.57 3817.08 3337.21 3349.6 10.06 8.99
painting 18.57 29.24 16.41 22.85 24.89 22.85 22.39 22.73 20.32
rendering 443.38 401.25 360.68 425.38 467.6 425.38 419.66 9.76 8.73
OPEN_MODAL
scripting 1475.78 1060.97 2766.58 1182.75 1097.05 1182.75 1516.63 47.31 42.31
painting 17.12 9.14 19.31 11.83 10.72 11.83 13.62 32.09 28.71
rendering 489.6 388.94 410.94 506.02 400.24 410.94 439.15 12.39 11.09
CLOSE_MODAL
scripting 671.09 665.56 596.81 690.51 752.16 671.09 675.23 8.25 7.38
painting 6.19 9.49 5.37 7.23 13.28 7.23 8.31 38.27 34.18
rendering 253.62 280.54 229.72 269.36 299.13 269.36 266.47 9.91 8.86

Comment on lines 149 to 153
const node = _menu.current;
if (Boolean(node?.closest(`.${MODAL_PORTAL_CLASSNAME}`))) {
return document.querySelector(
`.${MODAL_PORTAL_CLASSNAME}`,
) as HTMLElement;
}
return document.querySelector(`.${CANVAS_CLASSNAME}`) as HTMLElement;
return node?.closest(
`${SELECT_DROPDOWN_CONTAINER_SELECTOR}`,
) as HTMLElement;
}, []);
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we make getting the Closest canvas widget into a utility function rather than repeating this across

@wmdev0808
Copy link
Contributor Author

/ok-to-test sha=0771f23

@github-actions
Copy link

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/2195755869.
Workflow: Appsmith External Integration Test Workflow.
Commit: 0771f23.
PR: 13129.

@github-actions
Copy link

UI Performance test run logs and artifacts: https://github.com/appsmithorg/appsmith/actions/runs/2195755869.
Commit: 0771f23.
Results:

Click to view performance test results

Run 1 Run 2 Run 3 Run 4 Run 5 Median Mean SD.Sample SD.Population
SELECT_CATEGORY
scripting 681.72 802.51 722.28 698.68 831.3 722.28 747.3 8.82 7.89
painting 7.22 4.3 6.25 5.98 10.32 6.25 6.81 32.60 29.22
rendering 272.57 286.91 293.39 277.72 305.41 286.91 287.2 4.52 4.04
BIND_TABLE_DATA
scripting 2215.28 2273.09 2301.52 2223.24 2343.77 2273.09 2271.38 2.37 2.12
painting 12.92 23.19 16.78 16.73 15.46 16.73 17.02 22.27 19.92
rendering 628.83 638.87 623.05 647.48 663.92 638.87 640.43 2.52 2.25
CLICK_ON_TABLE_ROW
scripting 1847.45 2116.71 2024.5 2513.15 2076.33 2076.33 2115.63 11.57 10.35
painting 16.93 20.96 22.21 11.4 13.22 16.93 16.94 27.74 24.85
rendering 286.17 359.2 318.85 263.85 302.13 302.13 306.04 11.76 10.52
UPDATE_POST_TITLE
scripting 2986.62 4145.07 3162.62 2916.42 3283.88 3162.62 3298.92 14.99 13.41
painting 31.14 17.77 17.61 21.38 16.47 17.77 20.87 28.89 25.83
rendering 372.79 407.29 381.32 356.65 401.8 381.32 383.97 5.43 4.86
OPEN_MODAL
scripting 1156.11 1363.79 1113.05 3596.66 1455.27 1363.79 1736.98 60.41 54.03
painting 12.2 10.53 11.44 9.44 11.02 11.02 10.93 9.42 8.42
rendering 407.55 442.59 392.33 447.53 474.63 442.59 432.93 7.61 6.80
CLOSE_MODAL
scripting 631.51 705.32 622.61 605.71 725.42 631.51 658.11 8.14 7.28
painting 4.27 6.22 5.22 9.82 6.81 6.22 6.47 32.61 29.21
rendering 236.99 236.56 229.1 241.38 289.98 236.99 246.8 9.94 8.89

Tooluloope
Tooluloope previously approved these changes Apr 21, 2022
@Tooluloope Tooluloope changed the base branch from release to theming/phase-1 April 21, 2022 11:55
@Tooluloope Tooluloope changed the base branch from theming/phase-1 to release April 21, 2022 11:56
@Tooluloope Tooluloope dismissed their stale review April 21, 2022 11:56

The base branch was changed.

somangshu
somangshu previously approved these changes Jun 17, 2022
Copy link
Contributor

@somangshu somangshu left a comment

Choose a reason for hiding this comment

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

LGTM

@somangshu
Copy link
Contributor

Seems like related tests are failing, Please check @Tooluloope

@Tooluloope
Copy link
Contributor

/ok-to-test sha=7ab05c4

@github-actions
Copy link

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/2531769549.
Workflow: Appsmith External Integration Test Workflow.
Commit: 7ab05c4.
PR: 13129.

@github-actions
Copy link

UI Performance test run logs and artifacts: https://github.com/appsmithorg/appsmith/actions/runs/2531769549.
Commit: 7ab05c4.
Results:

Click to view performance test results

Run 1 Run 2 Run 3 Run 4 Run 5 Median Mean SD.Sample SD.Population
SELECT_WIDGET_MENU_OPEN
scripting 1463.18 1435.71 1602.31 1586.68 1490.26 1490.26 1515.63 4.93 4.41
painting 9.57 14.64 11.12 9.79 11.54 11.12 11.33 17.92 16.06
rendering 581.6 523.68 554.28 604.7 561.86 561.86 565.22 5.37 4.80
SELECT_WIDGET_SELECT_OPTION
scripting 258.27 229.3 267.99 245.73 206.56 245.73 241.57 10.08 9.01
painting 3.9 2.32 6.69 2.89 6.22 3.9 4.4 44.55 40.00
rendering 18.92 15.21 18.8 19.33 15.39 18.8 17.53 11.69 10.44
SELECT_CATEGORY
scripting 989.62 728.55 651.81 654.35 735.09 728.55 751.88 18.44 16.49
painting 5.84 10.26 4.88 7.6 5.15 5.84 6.75 33.04 29.63
rendering 439.65 310.4 305.68 296.09 329.37 310.4 336.24 17.56 15.71
BIND_TABLE_DATA
scripting 2270.22 2383.74 2325.26 2260.46 2211.28 2270.22 2290.19 2.89 2.58
painting 27.37 29.62 17.39 19.42 9.38 19.42 20.64 39.44 35.27
rendering 918.35 783.02 865.39 806.97 783.38 806.97 831.42 7.10 6.36
CLICK_ON_TABLE_ROW
scripting 2407.64 2098.33 1643.29 1777.61 1607.61 1777.61 1906.9 17.84 15.96
painting 28.32 15.34 17.18 11.94 16.99 16.99 17.95 34.32 30.70
rendering 448.34 354.88 292.9 313.28 297.27 313.28 341.33 18.93 16.94
UPDATE_POST_TITLE
scripting 4639.45 2791.17 2905.99 2910.37 2791.69 2905.99 3207.73 25.02 22.38
painting 45.59 23.81 19.17 15.58 17.6 19.17 24.35 50.31 45.01
rendering 745.99 407.89 428.58 416.88 413.89 416.88 482.65 30.54 27.32
OPEN_MODAL
scripting 1626.54 1208.96 1114.23 1444.7 1081.37 1208.96 1295.16 18.03 16.12
painting 15.39 12.34 12 19.22 16.83 15.39 15.16 20.12 18.01
rendering 619.93 486.51 457.47 519.45 461.3 486.51 508.93 13.13 11.74
CLOSE_MODAL
scripting 943.57 1878.69 742.95 1580.7 726.26 943.57 1174.43 44.68 39.96
painting 9.77 6.89 5.99 6.18 13.24 6.89 8.41 36.86 32.94
rendering 431.08 424.26 391.79 387.08 413.41 413.41 409.52 4.75 4.25

@somangshu somangshu removed the Needs Triaging Needs attention from maintainers to triage label Jun 21, 2022
@Tooluloope
Copy link
Contributor

/ok-to-test sha=5af2839

@github-actions
Copy link

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/2535378603.
Workflow: Appsmith External Integration Test Workflow.
Commit: 5af2839.
PR: 13129.

@github-actions
Copy link

UI Performance test run logs and artifacts: https://github.com/appsmithorg/appsmith/actions/runs/2535378603.
Commit: 5af2839.
Results:

Click to view performance test results

Run 1 Run 2 Run 3 Run 4 Run 5 Median Mean SD.Sample SD.Population
SELECT_CATEGORY
scripting 520.95 1796.07 606.43 507.64 563.89 563.89 799 69.93 62.55
painting 3.65 5.52 4.98 3.54 20.02 4.98 7.54 93.24 83.42
rendering 274.28 260.81 266.33 261.58 261.38 261.58 264.88 2.15 1.93
BIND_TABLE_DATA
scripting 2190.9 2245.72 2186.15 2156.99 2236.43 2190.9 2203.24 1.68 1.50
painting 13.62 15.72 14.76 13.09 13.51 13.62 14.14 7.64 6.79
rendering 650.92 653.54 689.74 677.9 667.7 667.7 667.96 2.45 2.19
CLICK_ON_TABLE_ROW
scripting 1357.84 1228.99 1238.66 1326.03 1281.58 1281.58 1286.62 4.31 3.85
painting 17.57 16.35 16.53 11.48 14.33 16.35 15.25 15.80 14.16
rendering 253.15 249.46 258.23 305.78 255.44 255.44 264.41 8.83 7.90
UPDATE_POST_TITLE
scripting 2119.48 1991.94 2139.42 2068.87 3317.6 2119.48 2327.46 23.91 21.38
painting 12.83 15.59 16.53 12.24 19.14 15.59 15.27 18.47 16.50
rendering 346.21 359.95 389.47 351.37 377.64 359.95 364.93 4.98 4.46
OPEN_MODAL
scripting 842.81 2418.27 1066.1 1002.56 2512.05 1066.1 1568.36 52.50 46.96
painting 17.22 9.86 11.81 17.79 15.99 15.99 14.53 24.16 21.61
rendering 386.26 407.45 425.91 403.19 396.7 403.19 403.9 3.63 3.25
CLOSE_MODAL
scripting 598.3 548.32 520.5 652.83 514.02 548.32 566.79 10.31 9.22
painting 5.16 7.5 6.15 10.31 6.5 6.5 7.12 27.67 24.72
rendering 379.85 387.94 351.26 361.08 349.97 361.08 366.02 4.67 4.18
SELECT_WIDGET_MENU_OPEN
scripting 1384.93 1380.19 1348.37 1422.53 1397.87 1384.93 1386.78 1.95 1.74
painting 13.68 5.89 9.47 6.51 8.6 8.6 8.83 34.88 31.26
rendering 411.67 417.62 413.78 428.26 434.13 417.62 421.09 2.30 2.06
SELECT_WIDGET_SELECT_OPTION
scripting 168.35 179.79 211.32 160.76 174.88 174.88 179.02 10.85 9.70
painting 2.75 3.82 5.59 2.8 3.7 3.7 3.73 30.83 27.61
rendering 11.29 12.48 12.08 12 12.46 12.08 12.06 3.98 3.57

@Tooluloope
Copy link
Contributor

/ok-to-test sha=31f91f6

@github-actions
Copy link

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/2539059851.
Workflow: Appsmith External Integration Test Workflow.
Commit: 31f91f6.
PR: 13129.

@github-actions
Copy link

UI Performance test run logs and artifacts: https://github.com/appsmithorg/appsmith/actions/runs/2539059851.
Commit: 31f91f6.
Results:

Click to view performance test results

Run 1 Run 2 Run 3 Run 4 Run 5 Median Mean SD.Sample SD.Population
SELECT_CATEGORY
scripting 511.88 560.89 571.27 578.94 566.57 566.57 557.91 4.76 4.26
painting 4.97 4.4 3.71 5.13 3.89 4.4 4.42 14.25 12.67
rendering 319.88 353.38 316.79 308.95 309.56 316.79 321.71 5.69 5.09
BIND_TABLE_DATA
scripting 2119.13 2131.98 2192.81 2186.01 2120.9 2131.98 2150.17 1.69 1.51
painting 11.4 13.47 8.17 14.18 16.94 13.47 12.83 25.49 22.84
rendering 725.28 715.58 712.14 706.69 749.38 715.58 721.81 2.33 2.09
CLICK_ON_TABLE_ROW
scripting 1401.45 1505.04 1485.76 1458.68 1444.15 1458.68 1459.02 2.73 2.45
painting 16.28 13.93 13.2 12.5 11.07 13.2 13.4 14.40 12.84
rendering 300.75 299.93 299.44 293.18 304.48 299.93 299.56 1.36 1.22
UPDATE_POST_TITLE
scripting 2130.29 2288.9 2154.95 2255.15 2345.88 2255.15 2235.03 4.06 3.63
painting 22.51 27.16 12.59 15.77 23.23 22.51 20.25 29.28 26.17
rendering 398.99 401.59 411.71 428.48 408.09 408.09 409.77 2.84 2.54
OPEN_MODAL
scripting 960.38 1026.96 1006.56 932.28 956.34 960.38 976.5 3.99 3.57
painting 14.22 11.51 11.35 18.57 17.28 14.22 14.59 22.55 20.15
rendering 461.82 464.53 466.02 476.13 466.68 466.02 467.04 1.16 1.04
CLOSE_MODAL
scripting 593.06 508.65 513.69 637.5 538.83 538.83 558.35 9.94 8.89
painting 9.62 11.03 8.91 30.73 4.45 9.62 12.95 79.07 70.73
rendering 421.58 412.13 411.71 414.6 394.23 412.13 410.85 2.46 2.20
SELECT_WIDGET_MENU_OPEN
scripting 1272.01 1235.6 1282.89 1296.16 1252.85 1272.01 1267.9 1.90 1.69
painting 7.44 7.63 5.71 5.02 6.84 6.84 6.53 17.30 15.47
rendering 613.26 624.01 608.48 584.26 621.61 613.26 610.32 2.60 2.32
SELECT_WIDGET_SELECT_OPTION
scripting 164.99 194.55 189.78 173.09 152.71 173.09 175.02 9.90 8.86
painting 1.91 4.89 3.36 2.82 4.85 3.36 3.57 36.41 32.49
rendering 11.92 10.52 12.82 11.63 11.86 11.86 11.75 6.98 6.30

@Tooluloope
Copy link
Contributor

/ok-to-test sha=43ecd36

@github-actions
Copy link

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/2539327948.
Workflow: Appsmith External Integration Test Workflow.
Commit: 43ecd36.
PR: 13129.

@github-actions
Copy link

UI Performance test run logs and artifacts: https://github.com/appsmithorg/appsmith/actions/runs/2539327948.
Commit: 43ecd36.
Results:

Click to view performance test results

Run 1 Run 2 Run 3 Run 4 Run 5 Median Mean SD.Sample SD.Population
SELECT_CATEGORY
scripting 744.26 796.45 790.62 642.34 1560.38 790.62 906.81 40.86 36.55
painting 14.29 6.48 9.86 4.38 8.72 8.72 8.75 42.86 38.29
rendering 397.09 365 361.93 356.28 352.4 361.93 366.54 4.85 4.34
BIND_TABLE_DATA
scripting 2259.79 2494.91 2202.7 2183.36 2194.44 2202.7 2267.04 5.77 5.16
painting 22.92 20.24 19.12 16.22 7.67 19.12 17.23 34.01 30.41
rendering 949.24 903.94 858.64 857.85 813.91 858.64 876.72 5.88 5.26
CLICK_ON_TABLE_ROW
scripting 2240.27 2556.79 1659.76 1524.29 1794.61 1794.61 1955.14 22.03 19.70
painting 21.07 14.24 13.68 18.27 23.83 18.27 18.22 23.93 21.41
rendering 375.97 369.57 348.96 348.54 339.82 348.96 356.57 4.32 3.86
UPDATE_POST_TITLE
scripting 3337.51 3390.02 2775.59 2543.39 2672.24 2775.59 2943.75 13.34 11.93
painting 19.73 27.18 16.39 21.23 14.34 19.73 19.77 25.04 22.41
rendering 575.34 586.49 482.54 487.91 458.88 487.91 518.23 11.27 10.08
OPEN_MODAL
scripting 1368.88 1652.38 1340.71 1237.4 1482.37 1368.88 1416.35 11.17 9.99
painting 11.23 14.89 18.32 13.77 18.29 14.89 15.3 19.93 17.84
rendering 648.94 621.81 529.18 543.14 577.69 577.69 584.15 8.71 7.79
CLOSE_MODAL
scripting 985.16 817.83 620.58 716.11 670.63 716.11 762.06 18.94 16.94
painting 8.91 6.43 5.47 26.84 8.19 8.19 11.17 79.41 70.99
rendering 643.88 652 462.05 501.78 502.7 502.7 552.48 16.06 14.36
SELECT_WIDGET_MENU_OPEN
scripting 1424.71 1372.18 1416.68 1404.45 1457.56 1416.68 1415.12 2.19 1.96
painting 7.61 15.82 9.59 10.02 9.63 9.63 10.53 29.44 26.31
rendering 753.42 741.85 799.29 740.76 749.33 749.33 756.93 3.21 2.87
SELECT_WIDGET_SELECT_OPTION
scripting 196.83 396.7 226.04 202.1 298.22 226.04 263.98 32.01 28.63
painting 16.49 2.88 6.21 2.83 6.5 6.21 6.98 80.23 71.78
rendering 15.76 18.29 17.75 14.66 15.73 15.76 16.44 9.25 8.27

@Tooluloope Tooluloope merged commit 7ba4f06 into release Jun 22, 2022
@Tooluloope Tooluloope deleted the fix/12161-multiselects-broken-in-modal branch June 22, 2022 08:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Something isn't working Form Widget Medium Issues that frustrate users due to poor UX MultiSelect Widget Issues related to MultiSelect Widget MultiTree Select Widget Issues related to MultiTree Select Widget Needs More Info Needs additional information Production Stale Tab Widget TreeSelect Issues related to TreeSelect Widget Widgets Product This label groups issues related to widgets
Projects
None yet
7 participants