fix: use true as contenteditable value on firefox

formwerkjs · Mar 2, 2025 · e969bb7 · e969bb7
1 parent d317409
commit e969bb7
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/.changeset/sharp-badgers-see.md b/.changeset/sharp-badgers-see.md
@@ -0,0 +1,5 @@
+---
+'@formwerk/core': patch
+---
+
+fix: use true as contenteditable value on firefox
diff --git a/packages/core/src/useDateTimeField/useDateTimeSegment.ts b/packages/core/src/useDateTimeField/useDateTimeSegment.ts
@@ -7,6 +7,7 @@ import { blockEvent } from '../utils/events';
 import { DateTimeSegmentType } from './types';
 import { isEditableSegmentType } from './constants';
 import { createDisabledContext } from '../helpers/createDisabledContext';
+import { isFirefox } from '../utils/platform';
 
 export interface DateTimeSegmentProps {
   /**
@@ -178,10 +179,12 @@ export function useDateTimeSegment(_props: Reactivify<DateTimeSegmentProps>) {
   };
 
   const segmentProps = computed(() => {
+    const ceValue = isFirefox() ? 'true' : 'plaintext-only';
+
     const domProps: DateTimeSegmentDomProps = {
       id,
       tabindex: isNonEditable() ? -1 : 0,
-      contenteditable: isNonEditable() ? undefined : 'plaintext-only',
+      contenteditable: isNonEditable() ? undefined : ceValue,
       'aria-disabled': isDisabled.value,
       'data-segment-type': toValue(props.type),
       'aria-label': isNonEditable() ? undefined : toValue(props.type),

diff --git a/packages/core/src/utils/platform.ts b/packages/core/src/utils/platform.ts
@@ -13,3 +13,7 @@ export function isMac() {
 
   return macRE.test(platform);
 }
+
+export function isFirefox() {
+  return /Firefox/i.test(navigator.userAgent);
+}