fix: Ensure scroll position is on the file input button when focused (#3847)

Author: avinashbot

pages/file-input/integ.page.tsx

@@ -0,0 +1,32 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import { Box, FileInput, FileInputProps } from '~components';
+
+import ScreenshotArea from '../utils/screenshot-area';
+
+export default function DateInputScenario() {
+  const [files, setFiles] = useState<File[]>([]);
+
+  const ref = React.useRef<FileInputProps.Ref>(null);
+
+  return (
+    <ScreenshotArea>
+      <Box padding="l">
+        <h1>File input</h1>
+        <button id="focus-before">Click here</button>
+        <div style={{ paddingBlock: 2000 }}>
+          <FileInput ref={ref} multiple={true} value={files} onChange={event => setFiles(event.detail.value)}>
+            Choose files
+          </FileInput>
+          <button id="focus-after">Click here</button>
+
+          {files.map((file, index) => (
+            <div key={index}>{file.name}</div>
+          ))}
+        </div>
+      </Box>
+    </ScreenshotArea>
+  );
+}

src/file-input/__integ__/file-input.test.ts

@@ -0,0 +1,47 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
+import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+
+import createWrapper from '../../../lib/components/test-utils/selectors';
+
+const wrapper = createWrapper();
+const fileInputWrapper = wrapper.findFileInput();
+
+const setupTest = (testFn: (page: BasePageObject) => Promise<void>) => {
+  return useBrowser(async browser => {
+    const page = new BasePageObject(browser);
+    await browser.url('#/light/file-input/integ');
+    await page.waitForVisible(fileInputWrapper.toSelector());
+    await testFn(page);
+  });
+};
+
+describe('FileInput', () => {
+  test(
+    'visible in viewport when input is focused',
+    setupTest(async page => {
+      await page.click('#focus-before');
+      await page.keys(['Tab']);
+
+      // Check that the file input is still in the viewport
+      await expect(page.isDisplayedInViewport(fileInputWrapper.findTrigger().toSelector())).resolves.toBe(true);
+    })
+  );
+
+  test(
+    'does not scroll the page if the button is already visible',
+    setupTest(async page => {
+      await page.click('#focus-before');
+      await page.keys(['Tab']);
+      const beforeScrollPosition = await page.getWindowScroll();
+
+      await page.click('#focus-after');
+      await page.keys(['Shift', 'Tab']);
+      const afterScrollPosition = await page.getWindowScroll();
+
+      // Check that the positions are the same
+      expect(beforeScrollPosition).toStrictEqual(afterScrollPosition);
+    })
+  );
+});

src/file-input/internal.tsx

@@ -66,7 +66,6 @@ const InternalFileInput = React.forwardRef(
     const onUploadButtonClick = () => uploadInputRef.current?.click();
     const onUploadInputFocus = () => {
       setIsFocused(true);
-      containerRef.current?.scrollIntoView?.();
     };
     const onUploadInputBlur = () => setIsFocused(false);
 

src/file-input/styles.scss

@@ -6,13 +6,25 @@
 @use '../internal/styles' as styles;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
-.root,
-.file-input {
-  /* used in test-utils */
+.root {
+  position: relative;
 }
 
-.hidden {
-  @include styles.awsui-util-hide;
+.file-input {
+  // Adapted from https://webaim.org/techniques/css/invisiblecontent/
+
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  block-size: 1px;
+  inline-size: 1px;
+  margin-block: -1px;
+  margin-inline: -1px;
+  padding-block: 0;
+  padding-inline: 0;
+  overflow: hidden;
 }
 
 .file-input-button {