fix: Resolves #20

CHR-onicles · Nov 4, 2023 · be33db6 · be33db6
1 parent 9cd00eb
commit be33db6
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -44,7 +44,7 @@ I did try doing everything myself, but faced issues around updating the form sta
  <details>
   <summary>Cons?</summary>
 
-- Some carousels like Alice behave unpredictably sometimes. So maybe don't use Alice.
+- Alice behaves a little unpredictably sometimes.
 </details>
 
  <details>
@@ -53,3 +53,7 @@ I did try doing everything myself, but faced issues around updating the form sta
 <b>Abso-fruitly!</b>
 
 </details>
+
+&nbsp;
+
+Compare against Swiper carousel [here](https://github.com/CHR-onicles/animated-stepper-form/tree/18-swiper-carousel#faqs-for-future-me)
diff --git a/src/components/CustomDatePicker/index.tsx b/src/components/CustomDatePicker/index.tsx
@@ -21,6 +21,7 @@ interface CustomDatePickerProps {
   minDate?: Date;
   showYearDropdown?: boolean;
   required?: boolean;
+  tabIndex?: number;
 }
 
 export const CustomDatePicker = ({
@@ -36,18 +37,20 @@ export const CustomDatePicker = ({
   minDate = new Date(1900, 0, 1),
   showYearDropdown = false,
   required = false,
+  tabIndex,
 }: CustomDatePickerProps) => {
   // console.log("[From Date picker]", startDate);
 
   return (
     <StyledCustomDatePicker
-      id={id}
       className={className}
       $isInline={isInline}
       $isReadOnly={isReadOnly}
       $isFullWidth={isFullWidth}>
       {isInline ? null : <BsCalendar className="calendar-icon" />}
       <DatePicker
+        id={id}
+        tabIndex={tabIndex}
         required={required}
         selected={startDate}
         onChange={date => {

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -21,6 +21,12 @@ const responsive = {
 
 const TOTAL_STEPS = steps.length;
 
+// Function to prevent users from tabbing into another step without finishing
+// the current step
+const getTabIndex = (currentStep: number, validStep: number) => {
+  return currentStep === validStep ? 0 : -1;
+};
+
 export const Home = () => {
   const [dob, setDob] = useState<Date>();
   const [step, setStep] = useState(1);
@@ -67,6 +73,7 @@ export const Home = () => {
               id="fullName"
               value={formData.fullName ?? ""}
               onChange={handleOnChange}
+              tabIndex={getTabIndex(step, 1)}
             />
           </div>
 
@@ -81,6 +88,7 @@ export const Home = () => {
               placeholder="Select a date"
               showYearDropdown
               required
+              tabIndex={getTabIndex(step, 1)}
             />
           </div>
 
@@ -96,12 +104,13 @@ export const Home = () => {
               value={formData.email ?? ""}
               onChange={handleOnChange}
               required
+              tabIndex={getTabIndex(step, 1)}
             />
           </div>
         </div>
       </div>
       <div className="form-footer">
-        <PrimaryButton>Next</PrimaryButton>
+        <PrimaryButton tabIndex={getTabIndex(step, 1)}>Next</PrimaryButton>
       </div>
     </form>,
     <form className="form" onSubmit={handleFormSubmit} key={2}>
@@ -117,6 +126,7 @@ export const Home = () => {
               name="country"
               value={formData.country ?? ""}
               onChange={handleOnChange}
+              tabIndex={getTabIndex(step, 2)}
             />
           </div>
 
@@ -129,6 +139,7 @@ export const Home = () => {
               name="state"
               value={formData.state ?? ""}
               onChange={handleOnChange}
+              tabIndex={getTabIndex(step, 2)}
             />
           </div>
 
@@ -141,6 +152,7 @@ export const Home = () => {
               name="city"
               value={formData.city ?? ""}
               onChange={handleOnChange}
+              tabIndex={getTabIndex(step, 2)}
             />
           </div>
 
@@ -153,20 +165,22 @@ export const Home = () => {
               name="postal"
               value={formData.postal ?? ""}
               onChange={handleOnChange}
+              tabIndex={getTabIndex(step, 2)}
             />
           </div>
         </div>
       </div>
       <div className="form-footer">
         <button
           type="button"
+          tabIndex={getTabIndex(step, 2)}
           onClick={() => {
             carouselRef?.current?.slidePrev();
             setStep(step - 1);
           }}>
           Previous
         </button>
-        <PrimaryButton>Next</PrimaryButton>
+        <PrimaryButton tabIndex={getTabIndex(step, 2)}>Next</PrimaryButton>
       </div>
     </form>,
     <form className="form" onSubmit={handleFormSubmit} key={3}>
@@ -182,6 +196,7 @@ export const Home = () => {
               name="occupation"
               value={formData.occupation ?? ""}
               onChange={handleOnChange}
+              tabIndex={getTabIndex(step, 3)}
             />
           </div>
 
@@ -194,6 +209,7 @@ export const Home = () => {
               name="company"
               value={formData.company ?? ""}
               onChange={handleOnChange}
+              tabIndex={getTabIndex(step, 3)}
             />
           </div>
 
@@ -206,20 +222,22 @@ export const Home = () => {
               name="industry"
               value={formData.industry ?? ""}
               onChange={handleOnChange}
+              tabIndex={getTabIndex(step, 3)}
             />
           </div>
         </div>
       </div>
       <div className="form-footer">
         <button
           type="button"
+          tabIndex={getTabIndex(step, 3)}
           onClick={() => {
             carouselRef.current?.slidePrev();
             setStep(step - 1);
           }}>
           Previous
         </button>
-        <PrimaryButton>Submit</PrimaryButton>
+        <PrimaryButton tabIndex={getTabIndex(step, 3)}>Submit</PrimaryButton>
       </div>
     </form>,
   ];