Merge pull request #29 from EAVFW/kba/enter-key-fix

Kba/enter key fix
EAVFW · Aug 16, 2024 · bc1866c · bc1866c
2 parents b5b5046 + 078ca89
commit bc1866c
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 15 deletions.
diff --git a/packages/core/src/components/intro/Intro.tsx b/packages/core/src/components/intro/Intro.tsx
@@ -13,7 +13,7 @@ export const Intro: React.FC<IntroProps> = ({ model, onBtnClick }) => {
     const { text, paragraph, buttonText } = model;
 
     /* Listens to enter key pressed */
-    useHandleEnterKeypress("intro", false, onBtnClick);
+    useHandleEnterKeypress(false, onBtnClick);
 
     return (
         <div style={introStyling}>

diff --git a/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx b/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
@@ -130,7 +130,7 @@ export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ question
     /**
      * While a base input component is active we should answer the question upon enter.
      */
-    useHandleEnterKeypress("baseinput", !questionModel.isActive, () => {
+    useHandleEnterKeypress(!questionModel.isActive, () => {
         answerQuestion(questionModel.logicalName, text, false);
     });
 

diff --git a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
@@ -14,18 +14,16 @@ export const SlideRenderer: React.FC = () => {
     const [className, setClassName] = useState(state.classes.slide);
 
     const currentSlide: SlideModel = state.slides[state.currIdx];
-    const buttonText: string = currentSlide?.buttonText ?? "OK";
-    // If not disabled by state.showPressEnter being set to false, and if the slide has questions, and all questions are not multilinetext, show the press enter message
-    const showPressEnter: boolean = (state.showPressEnter === false) ? false : (currentSlide?.questions !== undefined && currentSlide.questions.every(q => q.inputType !== "multilinetext" || !q.isActive));
 
-    /* KBA - Leaving this for now - have to get back to it since we never actually set .isActive property on question.. so we cant use it to condition with at the moment.. */
-    // const showPressEnter: boolean = currentSlide.questions.some(q => q.inputType === "multilinetext" && q.isActive) === false;
-    // console.log("showPressEnter", showPressEnter);
-    // console.log("showPressEnterCondition", currentSlide?.questions?.some(q => q.inputType === "multilinetext" && q.isActive));
-    // console.log("showPressEnterCurrentSlide", currentSlide);
+    // Determine whether to show the "Press Enter" message:
+    // 1. Only show if `state.showPressEnter` is not explicitly set to `false`.
+    // 2. The current slide must have questions, and all questions must either:
+    //    a) Not be of type "multilinetext", or
+    //    b) Be inactive.
+    const showPressEnter: boolean = (state.showPressEnter === false) ? false : (currentSlide?.questions !== undefined && currentSlide.questions.every(q => q.inputType !== "multilinetext" || !q.isActive));
 
     /* Listens to enter key pressed */
-    useHandleEnterKeypress("slide", showPressEnter === false, goToNextSlide);
+    useHandleEnterKeypress(false, goToNextSlide);
 
     let nextAllowedEffectTime = useRef(new Date().getTime());
     useEffect(() => {
@@ -53,7 +51,7 @@ export const SlideRenderer: React.FC = () => {
                 showPressEnter={showPressEnter}
                 children={
                     <>
-                        {buttonText}<IconResolver type={currentSlide?.icon ?? state.defaultSlideButtonIcon} style={{ height: '100%', marginLeft: quickformtokens.gap1 }} color={quickformtokens.onPrimary} size={20} />
+                        {currentSlide?.buttonText}<IconResolver type={currentSlide?.icon ?? state.defaultSlideButtonIcon} style={{ height: '100%', marginLeft: quickformtokens.gap1 }} color={quickformtokens.onPrimary} size={20} />
                     </>
                 }
             />

diff --git a/packages/core/src/components/submit/Submit.tsx b/packages/core/src/components/submit/Submit.tsx
@@ -30,7 +30,7 @@ export const Submit: React.FC<SubmitProps> = ({ model }) => {
     }
 
     /* Listens to enter key pressed */
-    useHandleEnterKeypress("submit", false, handleSubmit);
+    useHandleEnterKeypress(false, handleSubmit);
 
     return (
         <div style={submitStyling}>

diff --git a/packages/core/src/hooks/useHandleEnterKeypress.ts b/packages/core/src/hooks/useHandleEnterKeypress.ts
@@ -1,7 +1,7 @@
 "use client";
 import { useEffect } from "react";
 
-export function useHandleEnterKeypress(inputType: "multilinetext" | string, disabled?: boolean, customFunc?: () => void) {
+export function useHandleEnterKeypress(disabled?: boolean, customFunc?: () => void) {
     useEffect(() => {
         function handleKeypress(event: KeyboardEvent) {
             if (event.key === "Enter") {

diff --git a/packages/playground/src/components/baseinput/BaseInputComponent.tsx b/packages/playground/src/components/baseinput/BaseInputComponent.tsx
@@ -129,7 +129,7 @@ export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ question
     /**
      * While a base input component is active we should answer the question upon enter.
      */
-    useHandleEnterKeypress("baseinput", !questionModel.isActive, () => {
+    useHandleEnterKeypress(!questionModel.isActive, () => {
         answerQuestion(questionModel.logicalName, text, false);
     });