feat: make custom type from customInput works (#5)

* feat: better function to set caret position

* ci: remove deprecated husky line

* feat: make custom type from customInput works

---------

Co-authored-by: danestves <[email protected]>

.husky/commit-msg

@@ -1,5 +1,4 @@
 #!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
 . "$(dirname "$0")/common.sh"
 
 bun commitlint --edit $1

.husky/pre-commit

@@ -1,5 +1,4 @@
 #!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
 . "$(dirname "$0")/common.sh"
 
 bunx lint-staged

src/currency-input.tsx

@@ -2,6 +2,7 @@ import { mergeRefs } from "@react-aria/utils";
 import { resolveCurrencyFormat } from "@sumup/intl";
 import { type FocusEvent, type FormEvent, type ForwardedRef, forwardRef, useRef } from "react";
 import {
+	type InputAttributes,
 	NumberFormatBase,
 	type NumberFormatBaseProps,
 	type NumberFormatValues,
@@ -10,14 +11,18 @@ import {
 
 import { setCaretPosition } from "./utils";
 
-export interface CurrencyInputProps extends Omit<NumberFormatBaseProps, "format" | "prefix"> {
-	currency?: string;
+type CurrencyInputProps<BaseType = InputAttributes> = Omit<
+	NumberFormatBaseProps<BaseType>,
+	"format" | "prefix" | "customInput"
+> & {
 	locale?: string;
+	currency?: string;
 	withCurrencySymbol?: boolean;
-}
+	customInput?: React.ComponentType<BaseType>;
+};
 
-function RenderCurrencyInput(
-	{ locale = "en", currency = "USD", withCurrencySymbol = true, ...props }: CurrencyInputProps,
+function RenderCurrencyInput<BaseType = InputAttributes>(
+	{ locale = "en", currency = "USD", withCurrencySymbol = true, ...props }: CurrencyInputProps<BaseType>,
 	forwadedRef: ForwardedRef<HTMLInputElement>,
 ) {
 	const innerRef = useRef<HTMLInputElement>(null);
@@ -106,10 +111,12 @@ function RenderCurrencyInput(
 			setCaretPosition(innerRef.current, positionLastDigit + (minimumFractionDigits ?? 0));
 		}
 
+		// @ts-expect-error - onInput is not part of the type
 		props?.onInput?.(event);
 	}
 
 	return (
+		// @ts-expect-error
 		<NumberFormatBase
 			{...props}
 			format={format}
@@ -123,4 +130,7 @@ function RenderCurrencyInput(
 	);
 }
 
-export const CurrencyInput = forwardRef<HTMLInputElement, CurrencyInputProps>(RenderCurrencyInput);
+// @ts-expect-error - forwardRef is not part of the type
+export const CurrencyInput: <BaseType = InputAttributes>(
+	props: CurrencyInputProps<BaseType> & { ref?: ForwardedRef<HTMLInputElement> },
+) => ReturnType<typeof RenderCurrencyInput<BaseType>> = forwardRef(RenderCurrencyInput);

src/utils.ts

@@ -1,11 +1,23 @@
 /**
  * @see https://github.com/i18n-components/i18n-components/blob/main/packages/input-number/src/helpers.ts#L2
  */
-export function setCaretPosition(el: HTMLInputElement, caretPos: number): boolean {
+export function setCaretPosition(el: HTMLInputElement, caretPos = 0): boolean {
+	// biome-ignore lint/correctness/noSelfAssign: comes from the reference
+	el.value = el.value;
+	// ^ this is used to not only get "focus", but
+	// to make sure we don't have it everything -selected-
+	// (it causes an issue in chrome, and having it doesn't hurt any other browser)
+
 	if (el !== null) {
+		if (el.selectionStart || el.selectionStart === 0) {
+			el.focus();
+			el.setSelectionRange(caretPos, caretPos);
+			return true;
+		}
+
+		// fail city, fortunately this never happens (as far as I've tested) :)
 		el.focus();
-		el.setSelectionRange(caretPos, caretPos);
-		return true;
+		return false;
 	}
 
 	return false;