Fix a bug causing nav bar to float out of fixed position on iOS devices

Author: szhsin

example/src/components/Usage.js

@@ -113,24 +113,31 @@ function SubmenuExample() {
 
 function EventHandlingExample() {
     const ref = useRef(null);
-    const [text, setText] = useState('');
+    const lineNum = useRef(1);
+    const [output, setOutput] = useState([]);
+
+    const addLine = line => {
+        return setOutput(o => [...o, <li key={lineNum.current++}>{line}</li>]);
+    }
 
     const handleMenuClick = e => {
-        setText(t => t + `[Menu] ${e.value} clicked\n\n`);
+        addLine(`[Menu] ${e.value} clicked`);
+        addLine('------');
     };
 
     const handleFileClick = e => {
-        setText(t => t + `[MenuItem] ${e.value} clicked\n`);
+        addLine(`[MenuItem] ${e.value} clicked`);
     };
 
     const handleSaveClick = e => {
-        setText(t => t + `[MenuItem] ${e.value} clicked\n\n`);
+        addLine(`[MenuItem] ${e.value} clicked`);
+        addLine('------');
         return false;
     };
 
     useLayoutEffect(() => {
         ref.current.scrollTop = ref.current.scrollHeight;
-    }, [text]);
+    }, [output]);
 
     return (
         <Example data={codeExamples.eventHandling} >
@@ -150,12 +157,14 @@ function EventHandlingExample() {
                 </Menu>
 
                 <button className="btn btn btn-dark"
-                    onClick={() => setText('')}>
+                    onClick={() => setOutput([])}>
                     Clear
                 </button>
             </div>
 
-            <textarea readOnly ref={ref} value={text} />
+            <ul className="output" ref={ref}>
+                {output}
+            </ul>
         </Example>
     );
 }

example/src/data/codeExamples.js

@@ -672,7 +672,7 @@ export const customisedButton = {
             own React button component which implements a forwarding ref and
             accepts <code>onClick</code> and <code>onKeyDown</code> event props.</p>
             <p><code>Menu</code> also works well with third-party React libraries,
-            such as the Material-UI.
+            such as the <b>Material-UI</b>.
             See <a href="https://codesandbox.io/s/react-menu-material-ui-example-wvzpc"
                     target="_blank" rel="noopener noreferrer">
                     an example on CodeSandbox</a>.</p>

example/src/styles/_example.scss

@@ -38,7 +38,7 @@
 
 [aria-labelledby="event-handling"] {
     .example__demo {
-        min-height: 15rem;
+        height: 15rem;
         align-items: stretch;
         justify-content: space-around;
 
@@ -48,10 +48,14 @@
             justify-content: space-around;
         }
 
-        textarea {
+        .output {
+            @include mixins.reset-list;
             font-size: 0.9rem;
             flex: 0 1 20rem;
             margin-left: 1rem;
+            border: 1px solid var.$border-color;
+            border-radius: var.$border-radius-medium;
+            overflow-y: auto;
         }
     }
 }

example/src/styles/index.scss

@@ -61,6 +61,9 @@ code {
         img {
             height: 2rem;
             object-fit: contain;
+            &:hover {
+                opacity: 0.7;
+            }
         }
     }