From bf7b66987848cc148212153aa9e2bccf7ec79d2a Mon Sep 17 00:00:00 2001 From: victor Date: Sun, 10 Mar 2024 13:55:12 +0530 Subject: [PATCH 1/4] Fix the size of Select Menu in SelectWidget to prevent users from having to scroll both the main modal and dropdown menu to view the field choices (#4058). --- packages/volto/news/4058.bugfix | 1 + .../manage/Widgets/SelectStyling.jsx | 1 + .../manage/Widgets/SelectWidget.jsx | 1 + .../__snapshots__/SelectWidget.test.jsx.snap | 40 +------------------ 4 files changed, 4 insertions(+), 39 deletions(-) create mode 100644 packages/volto/news/4058.bugfix diff --git a/packages/volto/news/4058.bugfix b/packages/volto/news/4058.bugfix new file mode 100644 index 0000000000..9bc14acf1b --- /dev/null +++ b/packages/volto/news/4058.bugfix @@ -0,0 +1 @@ +Fix the size of Select Menu in SelectWidget to prevent users from having to scroll both the main modal and dropdown menu to view the field choices by adding a menuPortalTarget prop. @victorchrollo14 diff --git a/packages/volto/src/components/manage/Widgets/SelectStyling.jsx b/packages/volto/src/components/manage/Widgets/SelectStyling.jsx index a9c337f9ab..06e550f786 100644 --- a/packages/volto/src/components/manage/Widgets/SelectStyling.jsx +++ b/packages/volto/src/components/manage/Widgets/SelectStyling.jsx @@ -109,6 +109,7 @@ export const selectTheme = (theme) => ({ }); export const customSelectStyles = { + menuPortal: (base) => ({ ...base, zIndex: 9999 }), control: (styles, state) => ({ ...styles, border: 'none', diff --git a/packages/volto/src/components/manage/Widgets/SelectWidget.jsx b/packages/volto/src/components/manage/Widgets/SelectWidget.jsx index 182879130b..466d83fdf9 100644 --- a/packages/volto/src/components/manage/Widgets/SelectWidget.jsx +++ b/packages/volto/src/components/manage/Widgets/SelectWidget.jsx @@ -233,6 +233,7 @@ class SelectWidget extends Component { options={options} styles={customSelectStyles} theme={selectTheme} + menuPortalTarget={document.body} components={{ ...(options?.length > 25 && { MenuList, diff --git a/packages/volto/src/components/manage/Widgets/__snapshots__/SelectWidget.test.jsx.snap b/packages/volto/src/components/manage/Widgets/__snapshots__/SelectWidget.test.jsx.snap index 26d283e85c..903f2ad221 100644 --- a/packages/volto/src/components/manage/Widgets/__snapshots__/SelectWidget.test.jsx.snap +++ b/packages/volto/src/components/manage/Widgets/__snapshots__/SelectWidget.test.jsx.snap @@ -70,7 +70,7 @@ exports[`No 'No value' option when default value is 0 1`] = ` autocapitalize="none" autocomplete="off" autocorrect="off" - id="react-select-3-input" + id="react-select-2-input" spellcheck="false" style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;" tabindex="0" @@ -113,44 +113,6 @@ exports[`No 'No value' option when default value is 0 1`] = ` -
-
-
-
- 0 -
- -
-
-
- One -
- -
-
-
Date: Sun, 10 Mar 2024 15:13:44 +0530 Subject: [PATCH 2/4] update SelectWidget.test.jsx.snap to fix tests --- .../manage/Widgets/__snapshots__/SelectWidget.test.jsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/volto/src/components/manage/Widgets/__snapshots__/SelectWidget.test.jsx.snap b/packages/volto/src/components/manage/Widgets/__snapshots__/SelectWidget.test.jsx.snap index 903f2ad221..902a71ab5f 100644 --- a/packages/volto/src/components/manage/Widgets/__snapshots__/SelectWidget.test.jsx.snap +++ b/packages/volto/src/components/manage/Widgets/__snapshots__/SelectWidget.test.jsx.snap @@ -70,7 +70,7 @@ exports[`No 'No value' option when default value is 0 1`] = ` autocapitalize="none" autocomplete="off" autocorrect="off" - id="react-select-2-input" + id="react-select-3-input" spellcheck="false" style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;" tabindex="0" From 4bfeeb034dd581120ee342342f15877c91db6282 Mon Sep 17 00:00:00 2001 From: victor Date: Fri, 15 Mar 2024 19:14:34 +0530 Subject: [PATCH 3/4] removed menuPortalTarget and Added maxMenuHeight prop --- .../manage/Widgets/SelectWidget.jsx | 2 +- .../__snapshots__/SelectWidget.test.jsx.snap | 38 +++++++++++++++++++ 2 files changed, 39 insertions(+), 1 deletion(-) diff --git a/packages/volto/src/components/manage/Widgets/SelectWidget.jsx b/packages/volto/src/components/manage/Widgets/SelectWidget.jsx index 466d83fdf9..449fb67328 100644 --- a/packages/volto/src/components/manage/Widgets/SelectWidget.jsx +++ b/packages/volto/src/components/manage/Widgets/SelectWidget.jsx @@ -233,7 +233,7 @@ class SelectWidget extends Component { options={options} styles={customSelectStyles} theme={selectTheme} - menuPortalTarget={document.body} + maxMenuHeight="13em" components={{ ...(options?.length > 25 && { MenuList, diff --git a/packages/volto/src/components/manage/Widgets/__snapshots__/SelectWidget.test.jsx.snap b/packages/volto/src/components/manage/Widgets/__snapshots__/SelectWidget.test.jsx.snap index 902a71ab5f..a416e1c73a 100644 --- a/packages/volto/src/components/manage/Widgets/__snapshots__/SelectWidget.test.jsx.snap +++ b/packages/volto/src/components/manage/Widgets/__snapshots__/SelectWidget.test.jsx.snap @@ -113,6 +113,44 @@ exports[`No 'No value' option when default value is 0 1`] = ` +
+
+
+
+ 0 +
+ +
+
+
+ One +
+ +
+
+
Date: Mon, 18 Mar 2024 20:22:46 +0530 Subject: [PATCH 4/4] Merge remote-tracking branch 'upstream/main' into issue-4058