fix: min/max constraints on PhenotypeHistogram cutoff inputs

uc-cdis · Feb 3, 2025 · ba029dc · ba029dc
1 parent 2eb4573
commit ba029dc
Showing 1 changed file with 20 additions and 0 deletions.
diff --git a/src/Analysis/GWASApp/Components/Diagrams/PhenotypeHistogram/PhenotypeHistogram.jsx b/src/Analysis/GWASApp/Components/Diagrams/PhenotypeHistogram/PhenotypeHistogram.jsx
@@ -125,6 +125,16 @@ const PhenotypeHistogram = ({
                     setMinOutlierCutoff(value);
                     handleChangeMinOutlierCutoff(value);
                   }}
+                  min={data.bins[0]?.start || 0}
+                  max={maxOutlierCutoff || data.bins[data.bins.length - 1]?.end || 100}
+                  onKeyDown={(e) => {
+                    const { key } = e;
+                    // Allow only numeric keys, backspace, and delete, and one decimal point
+                    if (!/[\d]/.test(key) && key !== 'Backspace' && key !== 'Delete' && key !== 'ArrowLeft' && key !== 'ArrowRight'
+                    && (key !== '.' || e.target.value.includes('.'))) {
+                      e.preventDefault();
+                    }
+                  }}
                 />
               </div>
               <div className='GWASUI-column'>
@@ -138,6 +148,16 @@ const PhenotypeHistogram = ({
                     setMaxOutlierCutoff(value);
                     handleChangeMaxOutlierCutoff(value);
                   }}
+                  min={minOutlierCutoff || data.bins[0]?.start || 0}
+                  max={data.bins[data.bins.length - 1]?.end || 100}
+                  onKeyDown={(e) => {
+                    const { key } = e;
+                    // Allow only numeric keys, backspace, and delete, and one decimal point
+                    if (!/[\d]/.test(key) && key !== 'Backspace' && key !== 'Delete' && key !== 'ArrowLeft' && key !== 'ArrowRight'
+                    && (key !== '.' || e.target.value.includes('.'))) {
+                      e.preventDefault();
+                    }
+                  }}
                 />
               </div>
             </div>