feat(ui): use constants for reactflow opt-out classNames

squew · Feb 20, 2025 · f77549d · f77549d
1 parent 5653352
commit f77549d
Show file tree

Hide file tree

Showing 50 changed files with 194 additions and 71 deletions.
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx
@@ -44,6 +44,7 @@ import {
 } from 'features/nodes/store/selectors';
 import { connectionToEdge } from 'features/nodes/store/util/reactFlowUtil';
 import { selectSelectionMode, selectShouldSnapToGrid } from 'features/nodes/store/workflowSettingsSlice';
+import { NO_DRAG_CLASS, NO_PAN_CLASS, NO_WHEEL_CLASS } from 'features/nodes/types/constants';
 import type { AnyEdge, AnyNode } from 'features/nodes/types/invocation';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import type { CSSProperties, MouseEvent } from 'react';
@@ -356,6 +357,9 @@ export const Flow = memo(() => {
       selectionMode={selectionMode}
       elevateEdgesOnSelect
       nodeDragThreshold={1}
+      noDragClassName={NO_DRAG_CLASS}
+      noWheelClassName={NO_WHEEL_CLASS}
+      noPanClassName={NO_PAN_CLASS}
     >
       <Background />
     </ReactFlow>

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx
@@ -5,6 +5,7 @@ import { BaseEdge, EdgeLabelRenderer, getBezierPath } from '@xyflow/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import { buildSelectAreConnectedNodesSelected } from 'features/nodes/components/flow/edges/util/buildEdgeSelectors';
 import { selectShouldAnimateEdges } from 'features/nodes/store/workflowSettingsSlice';
+import { NO_DRAG_CLASS, NO_PAN_CLASS } from 'features/nodes/types/constants';
 import type { CollapsedInvocationNodeEdge } from 'features/nodes/types/invocation';
 import { memo, useMemo } from 'react';
 
@@ -80,7 +81,7 @@ const InvocationCollapsedEdge = ({
           <Box
             position="absolute"
             transform={`translate(-50%, -50%) translate(${labelX}px,${labelY}px)`}
-            className="edge-label-renderer__custom-edge nodrag nopan" // Unfortunately edge labels do not get the same zIndex treatment as edges do, so we need to manage this ourselves
+            className={`edge-label-renderer__custom-edge ${NO_DRAG_CLASS} ${NO_PAN_CLASS}`} // Unfortunately edge labels do not get the same zIndex treatment as edges do, so we need to manage this ourselves
             // See: https://github.com/xyflow/xyflow/issues/3658
             zIndex={1001}
           >

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx
@@ -6,6 +6,7 @@ import { BaseEdge, EdgeLabelRenderer, getBezierPath } from '@xyflow/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import { $templates } from 'features/nodes/store/nodesSlice';
 import { selectShouldAnimateEdges, selectShouldShowEdgeLabels } from 'features/nodes/store/workflowSettingsSlice';
+import { NO_DRAG_CLASS, NO_PAN_CLASS } from 'features/nodes/types/constants';
 import type { DefaultInvocationNodeEdge } from 'features/nodes/types/invocation';
 import { memo, useMemo } from 'react';
 
@@ -114,7 +115,7 @@ const InvocationDefaultEdge = ({
       {label && shouldShowEdgeLabels && (
         <EdgeLabelRenderer>
           <Flex
-            className="nodrag nopan"
+            className={`${NO_DRAG_CLASS} ${NO_PAN_CLASS}`}
             transform={`translate(-50%, -50%) translate(${labelX}px,${labelY}px)`}
             data-selected={selected}
             sx={edgeLabelWrapperSx}

diff --git a/...rontend/web/src/features/nodes/components/flow/nodes/Invocation/SaveToGalleryCheckbox.tsx b/...rontend/web/src/features/nodes/components/flow/nodes/Invocation/SaveToGalleryCheckbox.tsx
@@ -3,6 +3,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
 import { useNodeHasImageOutput } from 'features/nodes/hooks/useNodeHasImageOutput';
 import { useNodeIsIntermediate } from 'features/nodes/hooks/useNodeIsIntermediate';
 import { nodeIsIntermediateChanged } from 'features/nodes/store/nodesSlice';
+import { NO_PAN_CLASS } from 'features/nodes/types/constants';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -29,7 +30,7 @@ const SaveToGalleryCheckbox = ({ nodeId }: { nodeId: string }) => {
   }
 
   return (
-    <FormControl className="nopan">
+    <FormControl className={NO_PAN_CLASS}>
       <FormLabel m={0}>{t('nodes.saveToGallery')} </FormLabel>
       <Checkbox onChange={handleChange} isChecked={!isIntermediate} />
     </FormControl>

diff --git a/...eai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/UseCacheCheckbox.tsx b/...eai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/UseCacheCheckbox.tsx
@@ -2,6 +2,7 @@ import { Checkbox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useUseCache } from 'features/nodes/hooks/useUseCache';
 import { nodeUseCacheChanged } from 'features/nodes/store/nodesSlice';
+import { NO_FIT_ON_DOUBLE_CLICK_CLASS, NO_PAN_CLASS } from 'features/nodes/types/constants';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -22,9 +23,9 @@ const UseCacheCheckbox = ({ nodeId }: { nodeId: string }) => {
   );
   const { t } = useTranslation();
   return (
-    <FormControl>
+    <FormControl className={NO_FIT_ON_DOUBLE_CLICK_CLASS}>
       <FormLabel m={0}>{t('invocationCache.useCache')}</FormLabel>
-      <Checkbox className="nopan" onChange={handleChange} isChecked={useCache} />
+      <Checkbox className={NO_PAN_CLASS} onChange={handleChange} isChecked={useCache} />
     </FormControl>
   );
 };

diff --git a/...src/features/nodes/components/flow/nodes/Invocation/fields/FloatField/FloatFieldInput.tsx b/...src/features/nodes/components/flow/nodes/Invocation/fields/FloatField/FloatFieldInput.tsx
@@ -1,6 +1,7 @@
 import { CompositeNumberInput } from '@invoke-ai/ui-library';
 import { useFloatField } from 'features/nodes/components/flow/nodes/Invocation/fields/FloatField/useFloatField';
 import type { FieldComponentProps } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/types';
+import { NO_DRAG_CLASS } from 'features/nodes/types/constants';
 import type { FloatFieldInputInstance, FloatFieldInputTemplate } from 'features/nodes/types/field';
 import { memo } from 'react';
 
@@ -16,7 +17,7 @@ export const FloatFieldInput = memo((props: FieldComponentProps<FloatFieldInputI
       max={max}
       step={step}
       fineStep={fineStep}
-      className="nodrag"
+      className={NO_DRAG_CLASS}
       flex="1 1 0"
     />
   );

diff --git a/...res/nodes/components/flow/nodes/Invocation/fields/FloatField/FloatFieldInputAndSlider.tsx b/...res/nodes/components/flow/nodes/Invocation/fields/FloatField/FloatFieldInputAndSlider.tsx
@@ -1,6 +1,7 @@
 import { CompositeNumberInput, CompositeSlider } from '@invoke-ai/ui-library';
 import { useFloatField } from 'features/nodes/components/flow/nodes/Invocation/fields/FloatField/useFloatField';
 import type { FieldComponentProps } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/types';
+import { NO_DRAG_CLASS } from 'features/nodes/types/constants';
 import type { FloatFieldInputInstance, FloatFieldInputTemplate } from 'features/nodes/types/field';
 import { memo } from 'react';
 
@@ -18,7 +19,7 @@ export const FloatFieldInputAndSlider = memo(
           max={max}
           step={step}
           fineStep={fineStep}
-          className="nodrag"
+          className={NO_DRAG_CLASS}
           marks
           withThumbTooltip
           flex="1 1 0"
@@ -31,7 +32,7 @@ export const FloatFieldInputAndSlider = memo(
           max={max}
           step={step}
           fineStep={fineStep}
-          className="nodrag"
+          className={NO_DRAG_CLASS}
           flex="1 1 0"
         />
       </>

diff --git a/...rc/features/nodes/components/flow/nodes/Invocation/fields/FloatField/FloatFieldSlider.tsx b/...rc/features/nodes/components/flow/nodes/Invocation/fields/FloatField/FloatFieldSlider.tsx
@@ -1,6 +1,7 @@
 import { CompositeSlider } from '@invoke-ai/ui-library';
 import { useFloatField } from 'features/nodes/components/flow/nodes/Invocation/fields/FloatField/useFloatField';
 import type { FieldComponentProps } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/types';
+import { NO_DRAG_CLASS } from 'features/nodes/types/constants';
 import type { FloatFieldInputInstance, FloatFieldInputTemplate } from 'features/nodes/types/field';
 import { memo } from 'react';
 
@@ -16,7 +17,7 @@ export const FloatFieldSlider = memo((props: FieldComponentProps<FloatFieldInput
       max={max}
       step={step}
       fineStep={fineStep}
-      className="nodrag"
+      className={NO_DRAG_CLASS}
       marks
       withThumbTooltip
       flex="1 1 0"

diff --git a/...c/features/nodes/components/flow/nodes/Invocation/fields/InputFieldDescriptionPopover.tsx b/...c/features/nodes/components/flow/nodes/Invocation/fields/InputFieldDescriptionPopover.tsx
@@ -10,6 +10,7 @@ import {
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useInputFieldDescription } from 'features/nodes/hooks/useInputFieldDescription';
 import { fieldDescriptionChanged } from 'features/nodes/store/nodesSlice';
+import { NO_DRAG_CLASS, NO_PAN_CLASS, NO_WHEEL_CLASS } from 'features/nodes/types/constants';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -59,7 +60,7 @@ const Content = memo(({ nodeId, fieldName }: Props) => {
     <FormControl orientation="vertical">
       <FormLabel>{t('nodes.description')}</FormLabel>
       <Textarea
-        className="nodrag nopan nowheel"
+        className={`${NO_DRAG_CLASS} ${NO_PAN_CLASS} ${NO_WHEEL_CLASS}`}
         fontSize="sm"
         value={description ?? ''}
         onChange={onChange}

diff --git a/...ontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldTitle.tsx b/...ontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldTitle.tsx
@@ -12,7 +12,7 @@ import { useInputFieldIsConnected } from 'features/nodes/hooks/useInputFieldIsCo
 import { useInputFieldLabel } from 'features/nodes/hooks/useInputFieldLabel';
 import { useInputFieldTemplateTitle } from 'features/nodes/hooks/useInputFieldTemplateTitle';
 import { fieldLabelChanged } from 'features/nodes/store/nodesSlice';
-import { HANDLE_TOOLTIP_OPEN_DELAY, NO_FIT_ON_DOUBLE_CLICK_CLASS } from 'features/nodes/types/constants';
+import { HANDLE_TOOLTIP_OPEN_DELAY, NO_DRAG_CLASS, NO_FIT_ON_DOUBLE_CLICK_CLASS } from 'features/nodes/types/constants';
 import type { MouseEvent } from 'react';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -88,7 +88,7 @@ export const InputFieldTitle = memo((props: Props) => {
         isDisabled={isDragging}
       >
         <Text
-          className={`nodrag ${NO_FIT_ON_DOUBLE_CLICK_CLASS}`}
+          className={`${NO_DRAG_CLASS} ${NO_FIT_ON_DOUBLE_CLICK_CLASS}`}
           sx={labelSx}
           noOfLines={1}
           data-is-invalid={isInvalid}
@@ -104,7 +104,7 @@ export const InputFieldTitle = memo((props: Props) => {
   return (
     <Input
       ref={inputRef}
-      className="nodrag"
+      className={NO_DRAG_CLASS}
       variant="outline"
       {...editable.inputProps}
       _focusVisible={{ borderRadius: 'base', h: 'unset', px: 2 }}

diff --git a/...features/nodes/components/flow/nodes/Invocation/fields/IntegerField/IntegerFieldInput.tsx b/...features/nodes/components/flow/nodes/Invocation/fields/IntegerField/IntegerFieldInput.tsx
@@ -1,6 +1,7 @@
 import { CompositeNumberInput } from '@invoke-ai/ui-library';
 import type { FieldComponentProps } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/types';
 import { useIntegerField } from 'features/nodes/components/flow/nodes/Invocation/fields/IntegerField/useIntegerField';
+import { NO_DRAG_CLASS } from 'features/nodes/types/constants';
 import type { IntegerFieldInputInstance, IntegerFieldInputTemplate } from 'features/nodes/types/field';
 import { memo } from 'react';
 
@@ -17,7 +18,7 @@ export const IntegerFieldInput = memo(
         max={max}
         step={step}
         fineStep={fineStep}
-        className="nodrag"
+        className={NO_DRAG_CLASS}
         flex="1 1 0"
       />
     );

diff --git a/...nodes/components/flow/nodes/Invocation/fields/IntegerField/IntegerFieldInputAndSlider.tsx b/...nodes/components/flow/nodes/Invocation/fields/IntegerField/IntegerFieldInputAndSlider.tsx
@@ -1,6 +1,7 @@
 import { CompositeNumberInput, CompositeSlider } from '@invoke-ai/ui-library';
 import type { FieldComponentProps } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/types';
 import { useIntegerField } from 'features/nodes/components/flow/nodes/Invocation/fields/IntegerField/useIntegerField';
+import { NO_DRAG_CLASS } from 'features/nodes/types/constants';
 import type { IntegerFieldInputInstance, IntegerFieldInputTemplate } from 'features/nodes/types/field';
 import { memo } from 'react';
 
@@ -18,7 +19,7 @@ export const IntegerFieldInputAndSlider = memo(
           max={max}
           step={step}
           fineStep={fineStep}
-          className="nodrag"
+          className={NO_DRAG_CLASS}
           marks
           withThumbTooltip
           flex="1 1 0"
@@ -31,7 +32,7 @@ export const IntegerFieldInputAndSlider = memo(
           max={max}
           step={step}
           fineStep={fineStep}
-          className="nodrag"
+          className={NO_DRAG_CLASS}
           flex="1 1 0"
         />
       </>

diff --git a/...eatures/nodes/components/flow/nodes/Invocation/fields/IntegerField/IntegerFieldSlider.tsx b/...eatures/nodes/components/flow/nodes/Invocation/fields/IntegerField/IntegerFieldSlider.tsx
@@ -1,6 +1,7 @@
 import { CompositeSlider } from '@invoke-ai/ui-library';
 import type { FieldComponentProps } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/types';
 import { useIntegerField } from 'features/nodes/components/flow/nodes/Invocation/fields/IntegerField/useIntegerField';
+import { NO_DRAG_CLASS } from 'features/nodes/types/constants';
 import type { IntegerFieldInputInstance, IntegerFieldInputTemplate } from 'features/nodes/types/field';
 import { memo } from 'react';
 
@@ -17,7 +18,7 @@ export const IntegerFieldSlider = memo(
         max={max}
         step={step}
         fineStep={fineStep}
-        className="nodrag"
+        className={NO_DRAG_CLASS}
         marks
         withThumbTooltip
         flex="1 1 0"

diff --git a/...c/features/nodes/components/flow/nodes/Invocation/fields/StringField/StringFieldInput.tsx b/...c/features/nodes/components/flow/nodes/Invocation/fields/StringField/StringFieldInput.tsx
@@ -1,14 +1,15 @@
 import { Input } from '@invoke-ai/ui-library';
 import type { FieldComponentProps } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/types';
 import { useStringField } from 'features/nodes/components/flow/nodes/Invocation/fields/StringField/useStringField';
+import { NO_DRAG_CLASS, NO_PAN_CLASS, NO_WHEEL_CLASS } from 'features/nodes/types/constants';
 import type { StringFieldInputInstance, StringFieldInputTemplate } from 'features/nodes/types/field';
 import { memo } from 'react';
 
 export const StringFieldInput = memo(
   (props: FieldComponentProps<StringFieldInputInstance, StringFieldInputTemplate>) => {
     const { value, onChange } = useStringField(props);
 
-    return <Input className="nodrag nowheel nopan" value={value} onChange={onChange} />;
+    return <Input className={`${NO_DRAG_CLASS} ${NO_PAN_CLASS} ${NO_WHEEL_CLASS}`} value={value} onChange={onChange} />;
   }
 );
 

diff --git a/...eatures/nodes/components/flow/nodes/Invocation/fields/StringField/StringFieldTextarea.tsx b/...eatures/nodes/components/flow/nodes/Invocation/fields/StringField/StringFieldTextarea.tsx
@@ -1,6 +1,7 @@
 import { Textarea } from '@invoke-ai/ui-library';
 import type { FieldComponentProps } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/types';
 import { useStringField } from 'features/nodes/components/flow/nodes/Invocation/fields/StringField/useStringField';
+import { NO_DRAG_CLASS, NO_PAN_CLASS, NO_WHEEL_CLASS } from 'features/nodes/types/constants';
 import type { StringFieldInputInstance, StringFieldInputTemplate } from 'features/nodes/types/field';
 import { memo } from 'react';
 
@@ -10,7 +11,7 @@ export const StringFieldTextarea = memo(
 
     return (
       <Textarea
-        className="nodrag nowheel nopan"
+        className={`${NO_DRAG_CLASS} ${NO_PAN_CLASS} ${NO_WHEEL_CLASS}`}
         value={value}
         onChange={onChange}
         h="full"

diff --git a/...eatures/nodes/components/flow/nodes/Invocation/fields/inputs/BoardFieldInputComponent.tsx b/...eatures/nodes/components/flow/nodes/Invocation/fields/inputs/BoardFieldInputComponent.tsx
@@ -2,6 +2,7 @@ import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
 import { Combobox } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { fieldBoardValueChanged } from 'features/nodes/store/nodesSlice';
+import { NO_DRAG_CLASS, NO_WHEEL_CLASS } from 'features/nodes/types/constants';
 import type { BoardFieldInputInstance, BoardFieldInputTemplate } from 'features/nodes/types/field';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -58,7 +59,7 @@ const BoardFieldInputComponent = (props: FieldComponentProps<BoardFieldInputInst
 
   return (
     <Combobox
-      className="nowheel nodrag"
+      className={`${NO_WHEEL_CLASS} ${NO_DRAG_CLASS}`}
       value={value}
       options={options}
       onChange={onChange}

diff --git a/...tures/nodes/components/flow/nodes/Invocation/fields/inputs/BooleanFieldInputComponent.tsx b/...tures/nodes/components/flow/nodes/Invocation/fields/inputs/BooleanFieldInputComponent.tsx
@@ -1,6 +1,7 @@
 import { Switch } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { fieldBooleanValueChanged } from 'features/nodes/store/nodesSlice';
+import { NO_DRAG_CLASS } from 'features/nodes/types/constants';
 import type { BooleanFieldInputInstance, BooleanFieldInputTemplate } from 'features/nodes/types/field';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
@@ -27,7 +28,7 @@ const BooleanFieldInputComponent = (
     [dispatch, field.name, nodeId]
   );
 
-  return <Switch className="nodrag" onChange={handleValueChanged} isChecked={field.value} />;
+  return <Switch className={NO_DRAG_CLASS} onChange={handleValueChanged} isChecked={field.value} />;
 };
 
 export default memo(BooleanFieldInputComponent);
diff --git a/...odes/components/flow/nodes/Invocation/fields/inputs/CLIPEmbedModelFieldInputComponent.tsx b/...odes/components/flow/nodes/Invocation/fields/inputs/CLIPEmbedModelFieldInputComponent.tsx
@@ -2,6 +2,7 @@ import { Combobox, Flex, FormControl, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { fieldCLIPEmbedValueChanged } from 'features/nodes/store/nodesSlice';
+import { NO_DRAG_CLASS, NO_WHEEL_CLASS } from 'features/nodes/types/constants';
 import type { CLIPEmbedModelFieldInputInstance, CLIPEmbedModelFieldInputTemplate } from 'features/nodes/types/field';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -44,7 +45,11 @@ const CLIPEmbedModelFieldInputComponent = (props: Props) => {
   return (
     <Flex w="full" alignItems="center" gap={2}>
       <Tooltip label={!disabledTabs.includes('models') && t('modelManager.starterModelsInModelManager')}>
-        <FormControl className="nowheel nodrag" isDisabled={!options.length} isInvalid={!value && required}>
+        <FormControl
+          className={`${NO_WHEEL_CLASS} ${NO_DRAG_CLASS}`}
+          isDisabled={!options.length}
+          isInvalid={!value && required}
+        >
           <Combobox
             value={value}
             placeholder={required ? placeholder : `(Optional) ${placeholder}`}

diff --git a/...des/components/flow/nodes/Invocation/fields/inputs/CLIPGEmbedModelFieldInputComponent.tsx b/...des/components/flow/nodes/Invocation/fields/inputs/CLIPGEmbedModelFieldInputComponent.tsx
@@ -2,6 +2,7 @@ import { Combobox, Flex, FormControl, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { fieldCLIPGEmbedValueChanged } from 'features/nodes/store/nodesSlice';
+import { NO_DRAG_CLASS, NO_WHEEL_CLASS } from 'features/nodes/types/constants';
 import type { CLIPGEmbedModelFieldInputInstance, CLIPGEmbedModelFieldInputTemplate } from 'features/nodes/types/field';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -45,7 +46,11 @@ const CLIPGEmbedModelFieldInputComponent = (props: Props) => {
   return (
     <Flex w="full" alignItems="center" gap={2}>
       <Tooltip label={!disabledTabs.includes('models') && t('modelManager.starterModelsInModelManager')}>
-        <FormControl className="nowheel nodrag" isDisabled={!options.length} isInvalid={!value && required}>
+        <FormControl
+          className={`${NO_WHEEL_CLASS} ${NO_DRAG_CLASS}`}
+          isDisabled={!options.length}
+          isInvalid={!value && required}
+        >
           <Combobox
             value={value}
             placeholder={required ? placeholder : `(Optional) ${placeholder}`}

diff --git a/...des/components/flow/nodes/Invocation/fields/inputs/CLIPLEmbedModelFieldInputComponent.tsx b/...des/components/flow/nodes/Invocation/fields/inputs/CLIPLEmbedModelFieldInputComponent.tsx
@@ -2,6 +2,7 @@ import { Combobox, Flex, FormControl, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { fieldCLIPLEmbedValueChanged } from 'features/nodes/store/nodesSlice';
+import { NO_DRAG_CLASS, NO_WHEEL_CLASS } from 'features/nodes/types/constants';
 import type { CLIPLEmbedModelFieldInputInstance, CLIPLEmbedModelFieldInputTemplate } from 'features/nodes/types/field';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -45,7 +46,11 @@ const CLIPLEmbedModelFieldInputComponent = (props: Props) => {
   return (
     <Flex w="full" alignItems="center" gap={2}>
       <Tooltip label={!disabledTabs.includes('models') && t('modelManager.starterModelsInModelManager')}>
-        <FormControl className="nowheel nodrag" isDisabled={!options.length} isInvalid={!value && required}>
+        <FormControl
+          className={`${NO_WHEEL_CLASS} ${NO_DRAG_CLASS}`}
+          isDisabled={!options.length}
+          isInvalid={!value && required}
+        >
           <Combobox
             value={value}
             placeholder={required ? placeholder : `(Optional) ${placeholder}`}