fix: replace 'useLayoutEffect' with 'useEffect'

Author: nicholaschiang

components/availability-select/index.tsx

@@ -5,7 +5,6 @@ import {
   memo,
   useCallback,
   useEffect,
-  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -104,7 +103,7 @@ function AvailabilitySelect({
   // @see {@link https:bit.ly/2x9eM27}
   const inputRef = useRef<HTMLInputElement>(null);
   const timeoutId = useRef<ReturnType<typeof setTimeout>>();
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (focused) inputRef.current?.focus();
   }, [focused]);
 

components/match-select/index.tsx

@@ -1,14 +1,6 @@
 import { MenuSurface, MenuSurfaceAnchor } from '@rmwc/menu';
 import { TextField, TextFieldHTMLProps, TextFieldProps } from '@rmwc/textfield';
-import {
-  memo,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { MDCMenuSurfaceFoundation } from '@material/menu-surface';
 import cn from 'classnames';
 import { dequal } from 'dequal/lite';
@@ -62,7 +54,7 @@ function MatchSelect({
   ...textFieldProps
 }: MatchSelectProps): JSX.Element {
   const inputRef = useRef<HTMLInputElement>(null);
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (focused) inputRef.current?.focus();
   }, [focused]);
 
@@ -120,7 +112,7 @@ function MatchSelect({
   }, [isValidating, data]);
 
   const foundationRef = useRef<MDCMenuSurfaceFoundation>(null);
-  useLayoutEffect(() => {
+  useEffect(() => {
     (foundationRef.current as any)?.autoPosition_();
   });
 

components/select/index.tsx

@@ -4,7 +4,6 @@ import {
   SyntheticEvent,
   useCallback,
   useEffect,
-  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -145,7 +144,7 @@ export default function Select<T, O extends Option<T>>({
    * (the `TextField`) changes shape.
    * @see {@link https://github.com/jamesmfriedman/rmwc/issues/611}
    */
-  useLayoutEffect(() => {
+  useEffect(() => {
     (foundationRef.current as any)?.autoPosition_();
   });
 

components/time-select/index.tsx

@@ -3,7 +3,7 @@ import {
   SyntheticEvent,
   memo,
   useCallback,
-  useLayoutEffect,
+  useEffect,
   useRef,
   useState,
 } from 'react';
@@ -55,7 +55,7 @@ function TimeSelect({
   ...textFieldProps
 }: TimeSelectProps): JSX.Element {
   const inputRef = useRef<HTMLInputElement>(null);
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (focused) inputRef.current?.focus();
   }, [focused]);