From a869e09936520759a3765ffabd8c9f61728dab96 Mon Sep 17 00:00:00 2001
From: ccedrone <77400920+ccedrone@users.noreply.github.com>
Date: Mon, 1 Apr 2024 15:20:02 -0400
Subject: [PATCH] fix(NativeSelect): Fixed related simple pagination issue with
 selected states not updating after selection. (#1203)

---
 .changeset/fix-NativeSelectPagination.md      |   5 +
 .../NativeSelect/NativeSelect.test.js         |  51 +++++++-
 .../components/NativeSelect/NativeSelect.tsx  | 115 ++++++++++--------
 .../components/Table/TablePagination.test.js  |  11 +-
 4 files changed, 125 insertions(+), 57 deletions(-)
 create mode 100644 .changeset/fix-NativeSelectPagination.md

diff --git a/.changeset/fix-NativeSelectPagination.md b/.changeset/fix-NativeSelectPagination.md
new file mode 100644
index 000000000..95544e6ff
--- /dev/null
+++ b/.changeset/fix-NativeSelectPagination.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(NativeSelect): Fixes the issue with pagination control, rows per page, on Table and Datagrid per ticket: https://github.com/cengage/react-magma/issues/1201
diff --git a/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.test.js b/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.test.js
index 093819070..d30c5bf6e 100644
--- a/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.test.js
+++ b/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.test.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { axe } from '../../../axe-helper';
 import { magma } from '../../theme/magma';
 import { NativeSelect } from '.';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import { transparentize } from 'polished';
 import { Tooltip } from '../Tooltip';
 import { IconButton } from '../IconButton';
@@ -65,6 +65,21 @@ describe('NativeSelect', () => {
     );
   });
 
+  it('should update the selected option', () => {
+    const { getByTestId } = render(
+      <NativeSelect testId={testId}>
+        <option>1</option>
+        <option>2</option>
+        <option>3</option>
+      </NativeSelect>
+    );
+    const activeOption = getByTestId(testId);
+
+    fireEvent.change(getByTestId(testId), { target: { value: 2 } });
+
+    expect(activeOption).toHaveDisplayValue('2');
+  });
+
   it('should render a default inverse border', () => {
     const { getByTestId } = render(
       <NativeSelect isInverse testId={testId}></NativeSelect>
@@ -159,5 +174,39 @@ describe('NativeSelect', () => {
         'flex'
       );
     });
+
+    it(`Should display an additional wrapper with additionalContent'`, () => {
+      const { rerender, queryByTestId } = render(
+        <NativeSelect
+          labelPosition="left"
+          testId={testId}
+          additionalContent={
+            <Tooltip content={helpLinkLabel}>
+              <IconButton
+                aria-label={helpLinkLabel}
+                icon={<HelpIcon />}
+                onClick={onHelpLinkClick}
+                testId="Icon Button"
+                type={ButtonType.button}
+                size={ButtonSize.small}
+                variant={ButtonVariant.link}
+              />
+            </Tooltip>
+          }
+        />
+      );
+      expect(
+        queryByTestId(`${testId}-additional-content-wrapper`)
+      ).toBeInTheDocument();
+    });
+
+    it(`Shouldn't display an additional wrapper without additionalContent'`, () => {
+      const { rerender, queryByTestId } = render(
+        <NativeSelect labelPosition="left" testId={testId} />
+      );
+      expect(
+        queryByTestId(`${testId}-additional-content-wrapper`)
+      ).not.toBeInTheDocument();
+    });
   });
 });
diff --git a/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.tsx b/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.tsx
index cbbb7063e..0bb81f16c 100644
--- a/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.tsx
+++ b/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.tsx
@@ -139,6 +139,54 @@ export const NativeSelect = React.forwardRef<HTMLDivElement, NativeSelectProps>(
 
     const hasLabel = !!labelText;
 
+    const nativeSelect = (
+      <StyledFormFieldContainer
+        additionalContent={additionalContent}
+        containerStyle={containerStyle}
+        testId={testId && `${testId}-form-field-container`}
+        errorMessage={errorMessage}
+        fieldId={id}
+        hasLabel={!!labelText}
+        labelPosition={labelPosition}
+        labelStyle={labelStyle}
+        labelText={
+          labelPosition !== LabelPosition.left && additionalContent ? (
+            <>
+              {labelText}
+              {labelText && additionalContent}
+            </>
+          ) : (
+            labelText
+          )
+        }
+        labelWidth={labelWidth}
+        isInverse={isInverse}
+        helperMessage={helperMessage}
+        messageStyle={messageStyle}
+        ref={ref}
+      >
+        <StyledNativeSelectWrapper
+          disabled={disabled}
+          hasError={!!errorMessage}
+          isInverse={isInverse}
+          theme={theme}
+        >
+          <StyledNativeSelect
+            data-testid={testId}
+            hasError={!!errorMessage}
+            disabled={disabled}
+            id={id}
+            isInverse={isInverse}
+            theme={theme}
+            {...other}
+          >
+            {children}
+          </StyledNativeSelect>
+          <DefaultDropdownIndicator disabled={disabled} />
+        </StyledNativeSelectWrapper>
+      </StyledFormFieldContainer>
+    );
+
     // If the labelPosition is set to 'left' then a <div> wraps the FormFieldContainer, NativeSelectWrapper, and NativeSelect for proper styling alignment.
     function AdditionalContentWrapper(props) {
       if (
@@ -146,7 +194,10 @@ export const NativeSelect = React.forwardRef<HTMLDivElement, NativeSelectProps>(
         (labelPosition === LabelPosition.top && !hasLabel)
       ) {
         return (
-          <StyledAdditionalContentWrapper theme={theme}>
+          <StyledAdditionalContentWrapper
+            data-testid={`${testId}-additional-content-wrapper`}
+            theme={theme}
+          >
             {props.children}
           </StyledAdditionalContentWrapper>
         );
@@ -154,56 +205,16 @@ export const NativeSelect = React.forwardRef<HTMLDivElement, NativeSelectProps>(
       return props.children;
     }
 
-    return (
-      <AdditionalContentWrapper labelPosition={labelPosition}>
-        <StyledFormFieldContainer
-          additionalContent={additionalContent}
-          containerStyle={containerStyle}
-          testId={testId && `${testId}-form-field-container`}
-          errorMessage={errorMessage}
-          fieldId={id}
-          hasLabel={!!labelText}
-          labelPosition={labelPosition}
-          labelStyle={labelStyle}
-          labelText={
-            labelPosition !== LabelPosition.left && additionalContent ? (
-              <>
-                {labelText}
-                {labelText && additionalContent}
-              </>
-            ) : (
-              labelText
-            )
-          }
-          labelWidth={labelWidth}
-          isInverse={isInverse}
-          helperMessage={helperMessage}
-          messageStyle={messageStyle}
-          ref={ref}
-        >
-          <StyledNativeSelectWrapper
-            disabled={disabled}
-            hasError={!!errorMessage}
-            isInverse={isInverse}
-            theme={theme}
-          >
-            <StyledNativeSelect
-              data-testid={testId}
-              hasError={!!errorMessage}
-              disabled={disabled}
-              id={id}
-              isInverse={isInverse}
-              theme={theme}
-              {...other}
-            >
-              {children}
-            </StyledNativeSelect>
-            <DefaultDropdownIndicator disabled={disabled} />
-          </StyledNativeSelectWrapper>
-        </StyledFormFieldContainer>
-        {(labelPosition === 'left' && additionalContent) ||
-          (!labelText && additionalContent)}
-      </AdditionalContentWrapper>
-    );
+    if (additionalContent) {
+      return (
+        <AdditionalContentWrapper labelPosition={labelPosition}>
+          {nativeSelect}
+          {(labelPosition === LabelPosition.left && additionalContent) ||
+            (!labelText && additionalContent)}
+        </AdditionalContentWrapper>
+      );
+    } else {
+      return nativeSelect;
+    }
   }
 );
diff --git a/packages/react-magma-dom/src/components/Table/TablePagination.test.js b/packages/react-magma-dom/src/components/Table/TablePagination.test.js
index 96359bf0e..17a92f556 100644
--- a/packages/react-magma-dom/src/components/Table/TablePagination.test.js
+++ b/packages/react-magma-dom/src/components/Table/TablePagination.test.js
@@ -77,11 +77,16 @@ describe('Table Pagination', () => {
       );
       const rowsSelect = getByTestId('rowPerPageSelect');
 
-      fireEvent.change(rowsSelect, { target: { value: 20 }});
+      const appliedSelection = document.querySelector(
+        'select[data-testid=rowPerPageSelect]'
+      );
+
+      fireEvent.change(rowsSelect, { target: { value: 20 } });
 
       expect(handlePageChange).toHaveBeenCalledWith(expect.any(Object), 1);
       expect(handleRowsPerPageChange).toHaveBeenCalledWith('20');
       expect(getByText(/1-20/i)).toBeInTheDocument();
+      expect(appliedSelection).toHaveDisplayValue('20');
     });
   });
 
@@ -195,9 +200,7 @@ describe('Table Pagination', () => {
   });
 
   it('should hide rows per page component when no onRowsPerPageChanged function passed', () => {
-    const { queryByText } = render(
-      <TablePagination itemCount={20}/>
-    );
+    const { queryByText } = render(<TablePagination itemCount={20} />);
 
     expect(queryByText('Rows per page:')).not.toBeInTheDocument();
   });