From f3104ea4a25fdeeec2857d2c1b4afaad683d1c9b Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Fri, 20 Aug 2021 14:01:17 -0700
Subject: [PATCH] Fix EuiFilePicker example file list on Firefox

---
 src-docs/src/views/form_controls/file_picker.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src-docs/src/views/form_controls/file_picker.js b/src-docs/src/views/form_controls/file_picker.js
index ebb24cc0aa3..4e97bce3bbe 100644
--- a/src-docs/src/views/form_controls/file_picker.js
+++ b/src-docs/src/views/form_controls/file_picker.js
@@ -15,16 +15,16 @@ export default () => {
   const [large, setLarge] = useState(true);
 
   const onChange = (files) => {
-    setFiles(files.length > 0 ? files : {});
+    setFiles(files.length > 0 ? Array.from(files) : []);
   };
 
   const renderFiles = () => {
     if (files.length > 0) {
       return (
         <ul>
-          {Object.keys(files).map((item, i) => (
+          {files.map((file, i) => (
             <li key={i}>
-              <strong>{files[item].name}</strong> ({files[item].size} bytes)
+              <strong>{file.name}</strong> ({file.size} bytes)
             </li>
           ))}
         </ul>
@@ -57,9 +57,7 @@ export default () => {
               id="asdf2"
               multiple
               initialPromptText="Select or drag and drop multiple files"
-              onChange={(files) => {
-                onChange(files);
-              }}
+              onChange={onChange}
               display={large ? 'large' : 'default'}
               aria-label="Use aria labels when no actual label is in use"
             />