@licklist/design 0.75.0 → 0.75.1-dev.0

package/src/product-set/control/ProductSetControl.tsx

@@ -309,14 +309,17 @@ export function ProductSetControl({
             </Form.Control.Feedback>
           </Form.Group>
 
-          <Form.Group controlId='hasGeneralTicket' className='checkbox-second-column mt-4'>
-          <Form.Check
-            data-testid='save-as-template-checkbox'
-            label={t('Design:hasGeneralTicket')}
-            {...register('hasGeneralTicket')}
-            custom
-          />
-        </Form.Group>
+          <Form.Group
+            controlId='hasGeneralTicket'
+            className='checkbox-second-column mt-4'
+          >
+            <Form.Check
+              data-testid='save-as-template-checkbox'
+              label={t('Design:hasGeneralTicket')}
+              {...register('hasGeneralTicket')}
+              custom
+            />
+          </Form.Group>
 
           <Form.Group controlId={termsAndConditionsId}>
             <Form.Label>{t('Design:termsAndConditions')}</Form.Label>

package/src/product-set/form/ProductSetForm.tsx

@@ -7,13 +7,10 @@ import { VenueMapSet } from '@licklist/core/dist/DataMapper/Product/VenueMapSetD
 import { ServerError } from '@licklist/plugins/dist/hooks/Api/useHttpQuery'
 import FormErrorService from '@licklist/plugins/dist/services/Form/FormErrorService'
 import { ModifierSet } from '@licklist/core/dist/DataMapper/Product/ModifierSetDataMapper'
-
 import { isEqual } from 'lodash'
-// eslint-disable-next-line max-len
-import { ProviderBookingManagementSetting } from '@licklist/core/dist/DataMapper/Provider/ProviderBookingManagementSettingDataMapper'
 import { Zone } from '@licklist/core/dist/DataMapper/Provider/ZoneDataMapper'
 import { WorkHour } from '@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper'
-import { transformErrorToMessage } from '@licklist/plugins'
+import { transformErrorToMessage } from '@licklist/plugins/dist/utils/error'
 import { Dialog, useDialogContext } from '../../modals/dialog'
 import {
   ProductSetControl,
@@ -33,12 +30,16 @@ import { ErrorModal } from '../../iframe/order-process/components/ErrorModal'
 export interface WithIsLoading {
   isLoading: boolean
 }
+export interface WithIdOptional {
+  id?: number
+}
+
 export interface WithId {
   id: number
 }
 export interface ProductSetFormValues
   extends FormValues,
-    WithId,
+    WithIdOptional,
     ProductSetControlValues {
   steps: Step[]
   isOverrides?: boolean
@@ -55,7 +56,7 @@ export interface ProductSetFormProps
   serverErrors?: ServerError
   providerHasMap?: boolean
   venueMapSets?: VenueMapSet[]
-  providerHasBookingManagement?: ProviderBookingManagementSetting['hasBookingManagement']
+  providerHasBookingManagement?: boolean
   zones?: Zone[] | null
   isCreateAction?: boolean
   isOverrides?: boolean

package/src/product-set/form/ProductZonesControl.tsx

@@ -1,7 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import React, { useContext, useState } from 'react'
-
+import { useContext, useState } from 'react'
 import {
   ArrayPath,
   Controller,

package/src/product-set/form/ProductsControl.tsx

@@ -9,18 +9,14 @@ import {
 } from 'react-hook-form'
 import { useSensor, MouseSensor } from '@dnd-kit/core'
 import { useTranslation } from 'react-i18next'
-import { DEFAULT_PRODUCT_TYPE } from '@licklist/core/dist/DataMapper/Product/ProductDataMapper'
 import { generateUuid } from '@licklist/core/dist/Services'
 import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService'
-
 import { CategoryType } from '@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper'
 import { ProductControl, ProductControlProps, ProductSetFormValues } from '..'
 import { SortableTree } from '../../sortable-tree'
 import { CreateProductSetItem } from '../item/CreateProductSetItem'
 import { Product } from '../types'
 import { WithIsLoading } from './ProductSetForm'
-// @TODO not for first release
-// import Popover from "./ProductSetFormPopover";
 import { useSortableTreeFunctions } from '../hooks/useSortableTreeFunctions'
 import { SubProductsControl } from './SubProductsControl'
 import { ProductSetModalClasses } from '../../sortable-tree/SortableTreeItem'
@@ -47,6 +43,8 @@ const getDefaultProductValue = (sort: number): Product => ({
   deposit: 0,
   minQuantity: null,
   maxQuantity: null,
+  scanRangeStart: null,
+  scanRangeEnd: null,
   totalQuantity: 0,
   isAvailable: true,
   modifiersSet: [],
@@ -58,7 +56,6 @@ const getDefaultProductValue = (sort: number): Product => ({
   hasSpecialNotes: false,
   weight: 0,
   originalProductId: null,
-  type: DEFAULT_PRODUCT_TYPE,
   tierId: Number(uniqueId()),
   subProducts: [],
   images: [],
@@ -287,7 +284,6 @@ export function ProductsControl({
                     trigger(`${productControlFieldName}.${index}`)
                   }
                   saveValidField={saveValidField}
-                  // preItem={<Popover className="d-none d-sm-block" />}
                 >
                   <SubProductsControl
                     isLoading={isLoading}
@@ -313,9 +309,7 @@ export function ProductsControl({
           }
         }}
       />
-      <div className='manual-form-error'>
-        {categoryProductErrors && categoryProductErrors.message}
-      </div>
+      <div className='manual-form-error'>{categoryProductErrors?.message}</div>
     </>
   )
 }

package/src/product-set/form/StepsControl.tsx

@@ -167,9 +167,7 @@ export function StepsControl({
           }
         }}
       />
-      <div className='manual-form-error'>
-        {errors.steps && errors.steps.message}
-      </div>
+      <div className='manual-form-error'>{errors.steps?.message}</div>
     </>
   )
 }

package/src/product-set/form/SubProductsControl.tsx

@@ -70,9 +70,6 @@ export function SubProductsControl({
                   images: subProducts[index]?.images as Image[],
                 }
                 // @ts-expect-error TS2345
-                // @TODO fix prod type error
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
                 append(subProductCopy)
               }}
             />

package/src/product-set/form/VenueMapsControl.tsx

@@ -46,9 +46,6 @@ export const VenueMapsControl = ({
                             url={image.url}
                             name={name}
                             points={points}
-                            // @TODO fix prod type error
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                            // @ts-ignore
                             products={products}
                             pointProducts={pointProducts}
                             onPointProductsChange={onPointProductsChange}

package/src/product-set/form/context.tsx

@@ -8,12 +8,9 @@ import {
 } from 'react'
 import { VenueMapSet } from '@licklist/core/dist/DataMapper/Product/VenueMapSetDataMapper'
 import { ModifierSet } from '@licklist/core/dist/DataMapper/Product/ModifierSetDataMapper'
-// eslint-disable-next-line max-len
-import { ProviderBookingManagementSetting } from '@licklist/core/dist/DataMapper/Provider/ProviderBookingManagementSettingDataMapper'
 import { Zone } from '@licklist/core/dist/DataMapper/Provider/ZoneDataMapper'
 import { SelectItem } from '../../types/generic/SelectItem'
 
-
 interface LoadingContext {
   isLoading: boolean
   setLoading: (loading: boolean) => void
@@ -21,7 +18,7 @@ interface LoadingContext {
   modifiersSetList?: ModifierSet[] | null
   providerHasMap?: boolean | null
   venueMapSets?: VenueMapSet[]
-  providerHasBookingManagement?: ProviderBookingManagementSetting['hasBookingManagement']
+  providerHasBookingManagement?: boolean
   zones?: Zone[] | null
   expandedProductCategories: Record<string, boolean>
   setExpandedProductCategories: Dispatch<
@@ -46,7 +43,7 @@ type ProductSetContextProviderProps = PropsWithChildren<
 export function ProductSetContextProvider({
   children,
   productGroupList = [],
-  modifiersSetList =[],
+  modifiersSetList = [],
   providerHasMap = false,
   venueMapSets = [],
   providerHasBookingManagement,

package/src/product-set/product/ProductControl.tsx

@@ -1,9 +1,6 @@
 import {
   CategoryType,
   QuantityType,
-  QUANTITY_TYPE_CONSTANT,
-  QUANTITY_TYPE_LIST_DTO,
-  QUANTITY_TYPE_RECHARGING,
 } from '@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper'
 import { ProductType } from '@licklist/core/dist/DataMapper/Product/ProductDataMapper'
 import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService'
@@ -28,13 +25,11 @@ import {
   Controller,
   Path,
   useFormContext,
-  useWatch,
   UnpackNestedValue,
   PathValue,
 } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { useImages } from '@licklist/plugins/dist/hooks/Media/useImages'
-
 import {
   Image,
   IMAGE_TYPE_IMAGE,
@@ -65,7 +60,7 @@ import { MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH } from './constants'
 import { ProductZoneControlValues } from '../product-zone'
 import { AdvancedOptions } from './advanced-options'
 import { ProductZonesControl } from '../form/ProductZonesControl'
-
+import { ProductScanRangeControl } from './scanRange'
 
 export interface ModifiersSet {
   id: number
@@ -87,6 +82,8 @@ export interface ProductControlValues
   deposit: number
   minQuantity: number
   maxQuantity: number
+  scanRangeStart?: number
+  scanRangeEnd?: number
   totalQuantity: number
   isAvailable: boolean
   isSoldOut: boolean
@@ -122,7 +119,6 @@ export interface ProductControlProps<T>
   hasTicket?: boolean
   categoryType?: CategoryType
   isOverrides?: boolean
-
 }
 
 export function ProductControl<T extends FormValues>({
@@ -137,7 +133,6 @@ export function ProductControl<T extends FormValues>({
   categoryType,
   isOverrides = false,
 }: ProductControlProps<T>) {
-
   const {
     register,
     control,
@@ -203,7 +198,6 @@ export function ProductControl<T extends FormValues>({
     setInitialImages(formImages as Image[])
   }, [getValues, setInitialImages, fieldNamePrefix])
 
-
   useEffect(() => {
     if (Array.isArray(images)) {
       setValue(
@@ -299,14 +293,14 @@ export function ProductControl<T extends FormValues>({
               isOverrides={isOverrides}
               onFocus={onFocus}
             />
-   
-              <ProductQuantityRechargingControl<T>
-                isLoading={isLoading}
-                fieldNamePrefix={fieldNamePrefix}
-                onFocus={onFocus}
-                disabled={isUnlimited}
-              />
-            
+
+            <ProductQuantityRechargingControl<T>
+              isLoading={isLoading}
+              fieldNamePrefix={fieldNamePrefix}
+              onFocus={onFocus}
+              disabled={isUnlimited}
+            />
+
             <Form.Group
               controlId={unlimitedQuantityId}
               className='custom-checkbox'
@@ -320,6 +314,13 @@ export function ProductControl<T extends FormValues>({
               />
               <Form.Check.Label>{t('isUnlimited')}</Form.Check.Label>
             </Form.Group>
+
+            <ProductScanRangeControl<T>
+              isLoading={isLoading}
+              fieldNamePrefix={fieldNamePrefix}
+              isOverrides={isOverrides}
+              onFocus={onFocus}
+            />
           </div>
         </Col>
       </Row>
@@ -411,6 +412,7 @@ export function ProductControl<T extends FormValues>({
             name={`${fieldNamePrefix}.isSoldOut` as Path<T>}
           />
         </Form.Group>
+
         <Form.Group controlId={advancedId} className='custom-checkbox'>
           <Form.Check
             custom

package/src/product-set/product/advanced-options/AdvancedOptions.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import { Col, Form } from 'react-bootstrap'
 import { Controller, Path, useFormContext } from 'react-hook-form'
 import { HookFormService } from '@licklist/plugins'

package/src/product-set/product/booking-management/ProductBookingManagementControl.tsx

@@ -86,6 +86,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
               <Form.Control
                 ref={ref}
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 min={0}
                 step={1}
                 value={value as string}
@@ -129,6 +130,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
               <Form.Control
                 ref={ref}
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 min='0'
                 step='1'
                 value={value as string}

package/src/product-set/product/deposit/ProductDepositControl.tsx

@@ -50,6 +50,7 @@ export function ProductDepositControl<T extends FormValues>(
               <Form.Control
                 ref={ref}
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 min={0}
                 max={Number(totalPrice)}
                 step='0.01'

package/src/product-set/product/duration/ProductDurationControl.tsx

@@ -91,6 +91,7 @@ export const ProductDurationControl = <T,>({
                 <Form.Control
                   type='number'
                   min={0}
+                  onWheel={(event) => event.currentTarget.blur()}
                   step={1}
                   value={durationHours}
                   disabled={disabled}
@@ -127,6 +128,7 @@ export const ProductDurationControl = <T,>({
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   disabled={disabled}
                   value={durationMinutes}
                   isInvalid={isInvalid}

package/src/product-set/product/price/ProductPriceControl.tsx

@@ -59,6 +59,7 @@ export function ProductPriceControl<T extends FormValues>({
                 ref={ref}
                 type='number'
                 min={0}
+                onWheel={(event) => event.currentTarget.blur()}
                 max={999999.99}
                 step='0.01'
                 value={value as string}

package/src/product-set/product/quantity/ProductQuantityConstantControl.tsx

@@ -111,6 +111,7 @@ export function ProductQuantityConstantControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   isInvalid={HookFormService.isInvalid<T>(
                     `${fieldNamePrefix}.totalQuantity` as Path<T>,
@@ -165,6 +166,7 @@ export function ProductQuantityConstantControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   onChange={onChange}
                   onFocus={onFocus}

package/src/product-set/product/quantity/ProductQuantityControl.tsx

@@ -85,6 +85,7 @@ export function ProductQuantityControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   onChange={onChange}
                   onFocus={onFocus}
@@ -143,6 +144,7 @@ export function ProductQuantityControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value && (value as string)}
                   onFocus={onFocus}
                   onChange={onChange}

package/src/product-set/product/quantity/ProductQuantityRechargingControl.tsx

@@ -69,6 +69,7 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
                 type='number'
                 min={0}
                 step={1}
+                onWheel={(event) => event.currentTarget.blur()}
                 {...register(`${fieldNamePrefix}.totalQuantity` as Path<T>, {
                   validate: (value) => {
                     if (unlimited) return true

package/src/product-set/product/scanRange/ProductScanRangeControl.stories.ts

@@ -0,0 +1,45 @@
+// ProductScanRangeControl.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { FormProvider, useForm } from 'react-hook-form';
+import Form from 'react-bootstrap/Form';        
+
+import {
+  ProductScanRangeControl,
+  ProductScanRangeControlProps,
+  ProductScanRangeControlValues,
+} from './ProductScanRangeControl';
+
+
+const meta: Meta<typeof ProductScanRangeControl> = {
+  title: 'Product Set/Product/Scan Range',
+  component: ProductScanRangeControl,
+};
+export default meta;
+
+
+type Story = StoryObj<typeof ProductScanRangeControl>;
+
+export const Default: Story = {
+  args: {
+    isLoading: false,
+  },
+
+  render: (args: ProductScanRangeControlProps<{}>) => {
+    const methods = useForm<ProductScanRangeControlValues>({ mode: 'onChange' });
+    const onSubmit = (data: ProductScanRangeControlValues) =>
+      console.log('onSubmit', data);
+
+    return (
+      <FormProvider {...methods}>
+        <Form
+          className="d-flex flex-column"
+          noValidate
+          onSubmit={methods.handleSubmit(onSubmit)}
+        >
+          <ProductScanRangeControl {...args} />
+        </Form>
+      </FormProvider>
+    );
+  },
+};
+

package/src/product-set/product/scanRange/ProductScanRangeControl.tsx

@@ -0,0 +1,163 @@
+import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService'
+import {
+  FieldNamePrefixPath,
+  FormValues,
+} from '@licklist/plugins/dist/types/services/Form/hook-form-service'
+import { useId } from '@react-aria/utils'
+import { Form } from 'react-bootstrap'
+import Col from 'react-bootstrap/Col'
+import InputGroup from 'react-bootstrap/InputGroup'
+import Row from 'react-bootstrap/Row'
+import { Controller, Path, useFormContext } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+
+import { ReactComponent as IncrementIcon } from '../../../assets/dashboard/increment.svg'
+
+export interface ProductScanRangeControlValues extends FormValues {
+  scanRangeStart: number
+  scanRangeEnd: number
+}
+
+export interface ProductScanRangeControlProps<T> extends FieldNamePrefixPath<T> {
+  isLoading: boolean
+  onFocus?: (e: React.SyntheticEvent) => void
+  isOverrides?: boolean
+}
+
+export function ProductScanRangeControl<T extends FormValues>(
+  props: ProductScanRangeControlProps<T>,
+) {
+  const { isLoading = false, fieldNamePrefix, onFocus, isOverrides } = props
+  const {
+    control,
+    formState: { errors },
+    setValue,
+    watch
+  } = useFormContext<T>()
+  const { t } = useTranslation('Design')
+
+  const scanRangeStartId = useId()
+  const scanRangeEndId = useId()
+
+  const scanRangeStartValue = watch(`${fieldNamePrefix}.scanRangeStart` as Path<T>)
+  const scanRangeEndValue = watch(`${fieldNamePrefix}.scanRangeEnd` as Path<T>)
+
+  return (
+    <>
+     <Form.Label>{t('scanningRange')}</Form.Label>
+    <Row>
+      <Col xs={12} sm={6}>
+        <Form.Group controlId={scanRangeStartId}>
+          <Form.Label>{t('beforeEventStart')}</Form.Label>
+
+          <InputGroup hasValidation>
+            <InputGroup.Prepend
+              className='arrow-up-btn'
+              onClick={() => {
+                setValue(
+                  `${fieldNamePrefix}.scanRangeStart` as Path<T>,
+                  (Number(scanRangeStartValue) + 1) as any,
+                )
+              }}
+            >
+              <InputGroup.Text className='py-0 px-3'>
+                <IncrementIcon />
+              </InputGroup.Text>
+            </InputGroup.Prepend>
+
+            <Controller
+              render={({ field: { value, onChange, ref } }) => (
+                <Form.Control
+                  ref={ref}
+                  type='number'
+                  min={0}
+                  step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
+                  value={value as string}
+                  onChange={onChange}
+                  onFocus={onFocus}
+                  disabled={isLoading || isOverrides}
+                />
+              )}
+              control={control}
+              name={`${fieldNamePrefix}.scanRangeStart` as Path<T>}
+              rules={{
+                min: {
+                  value: 0,
+                  message: t('Validation:fieldMinNumber', {
+                    attribute: t('scanRangeStart'),
+                    min: 0,
+                  }) as string,
+                },
+              }}
+            />
+
+            <Form.Control.Feedback type='invalid'>
+              {HookFormService.getErrors<T>(
+                `${fieldNamePrefix}.scanRangeStart` as Path<T>,
+                errors,
+              )}
+            </Form.Control.Feedback>
+          </InputGroup>
+        </Form.Group>
+      </Col>
+
+      <Col xs={12} sm={6}>
+        <Form.Group controlId={scanRangeEndId}>
+          <Form.Label>{t('AfterEventStart')}</Form.Label>
+
+          <InputGroup hasValidation>
+            <InputGroup.Prepend
+              className='arrow-up-btn'
+              onClick={() => {
+                setValue(
+                  `${fieldNamePrefix}.scanRangeEnd` as Path<T>,
+                  (Number(scanRangeEndValue) + 1) as any,
+                )
+              }}
+            >
+              <InputGroup.Text className='py-0 px-3'>
+                <IncrementIcon />
+              </InputGroup.Text>
+            </InputGroup.Prepend>
+
+            <Controller
+              render={({ field: { value, onChange, ref } }) => (
+                <Form.Control
+                  ref={ref}
+                  type='number'
+                  min={0}
+                  step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
+                  value={value && (value as string)}
+                  onFocus={onFocus}
+                  onChange={onChange}
+                  disabled={isLoading || isOverrides}
+                />
+              )}
+              control={control}
+              name={`${fieldNamePrefix}.scanRangeEnd` as Path<T>}
+              rules={{
+                min: {
+                  value: 0,
+                  message: t('Validation:fieldMinNumber', {
+                    attribute: t('scanRangeEnd'),
+                    min: 0,
+                  }) as string,
+                },
+              }}
+            />
+
+            <Form.Control.Feedback type='invalid'>
+              {HookFormService.getErrors<T>(
+                `${fieldNamePrefix}.scanRangeEnd` as Path<T>,
+                errors,
+              )}
+            </Form.Control.Feedback>
+          </InputGroup>
+        </Form.Group>
+      </Col>
+    </Row>
+    </>
+  )
+}

package/src/product-set/product/scanRange/index.ts

@@ -0,0 +1 @@
+export * from './ProductScanRangeControl'

package/src/product-set/product-category/ProductCategoryControl.tsx

@@ -221,6 +221,7 @@ export function ProductCategoryControl({
                       step={1}
                       value={value === null ? '' : value}
                       onChange={onChange}
+                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.minSubItems` as const,
                         errors,
@@ -293,6 +294,7 @@ export function ProductCategoryControl({
                       name={name}
                       value={value === null ? '' : value}
                       onChange={onChange}
+                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.maxSubItems` as const,
                         errors,
@@ -353,6 +355,7 @@ export function ProductCategoryControl({
                       min={0}
                       step={1}
                       type='number'
+                      onWheel={(event) => event.currentTarget.blur()}
                       disabled={isOverride}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.overallQuantity`,
@@ -543,6 +546,7 @@ export function ProductCategoryControl({
                       step={1}
                       value={value}
                       onChange={onChange}
+                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.remainderExpireAfter` as const,
                         errors,

package/src/product-set/product-zone/ProductZoneControl.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo } from 'react'
+import { useContext, useEffect, useMemo } from 'react'
 import { Col, Form, Row } from 'react-bootstrap'
 import {
   ArrayPath,

package/src/recurrence-input/RecurrenceEndInput.tsx

@@ -109,6 +109,7 @@ function RecurrenceEndInput({
                 type='number'
                 min={1}
                 max={500}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={disabled || !count || count === 500}
                 aria-label='Occurrence count'
                 value={count ?? defaultOccurrences[frequency]}