Fixed initial focus when the modal opens to the first enabled sticker button.

components/calender/modals/AddUpdateSticker.tsx

@@ -13,7 +13,7 @@ import {
   SimpleGrid,
   Box
 } from "@chakra-ui/react";
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useRef } from "react";
 import { format, isSameDay } from "date-fns";
 import { Icon } from "@iconify/react";
 import { StickersContext } from "../../../contexts/StickerContext";
@@ -58,7 +58,7 @@ const AddUpdateSticker = ({
 
   const { addEditSticker } = useContext(StickersContext);
 
-  // ! Update these states to sat "add" and "edit" for easier reading.
+  // ! Update these states to say "add" and "edit" for easier reading.
 
   const [modalVariant] = useState<"currDate" | "notCurrDate">(
     isSameDay(date, new Date()) ? "currDate" : "notCurrDate"
@@ -75,6 +75,9 @@ const AddUpdateSticker = ({
     handleClose();
   };
 
+  // The first sticker to have focus when the modal opens.
+  const initialRef = useRef();
+
   // * Double check that the submit button is disabled if the selected sticker is the same as the current sticker.
 
   const variants = {
@@ -97,6 +100,7 @@ const AddUpdateSticker = ({
               currSticker={currSticker}
               selectedSticker={selectedSticker}
               updateSelectedSticker={updateSelectedSticker}
+              initialSticker={initialRef}
             />
           </VStack>
         ),
@@ -140,6 +144,7 @@ const AddUpdateSticker = ({
               currSticker={currSticker}
               selectedSticker={selectedSticker}
               updateSelectedSticker={updateSelectedSticker}
+              initialSticker={initialRef}
             />
           </VStack>
         ),
@@ -223,6 +228,7 @@ const AddUpdateSticker = ({
   return (
     <Modal
       isCentered
+      initialFocusRef={initialRef}
       isOpen={isOpen}
       onClose={() => handleClose()}
       motionPreset="slideInBottom"

components/calender/modals/StickerSelector.tsx

@@ -7,6 +7,7 @@ interface StickerSelectorProps {
   currSticker: StickerVal;
   selectedSticker: StickerVal;
   updateSelectedSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
+  initialSticker: React.MutableRefObject<undefined>;
 }
 
 /**
@@ -21,7 +22,8 @@ const StickerSelector = ({
   stickerSet,
   currSticker,
   selectedSticker,
-  updateSelectedSticker
+  updateSelectedSticker,
+  initialSticker
 }: StickerSelectorProps): JSX.Element => {
   const stickers = {
     Demo: (
@@ -34,6 +36,7 @@ const StickerSelector = ({
       >
         <Button
           isDisabled={currSticker >= 1}
+          ref={currSticker <= 1 ? initialSticker : null}
           border={selectedSticker === 1 ? "1px solid #FFF" : "opx"}
           bg={selectedSticker === 1 && "gray.800"}
           onClick={() => updateSelectedSticker(1)}
@@ -43,6 +46,7 @@ const StickerSelector = ({
         </Button>
         <Button
           isDisabled={currSticker === 0}
+          ref={currSticker >= 1 ? initialSticker : null}
           border={selectedSticker === 0 ? "1px solid #FFF" : "opx"}
           bg={selectedSticker === 0 && "gray.800"}
           onClick={() => updateSelectedSticker(0)}