chore: move-default-id-generation-to-hook

Author: tractorss

src/lib/form/bignumber-field/index.tsx

@@ -1,4 +1,4 @@
-import React, { useId } from "react";
+import React from "react";
 import SuccessIcon from "../../../assets/svgs/status-icons/success.svg";
 import WarningIcon from "../../../assets/svgs/status-icons/warning.svg";
 import ErrorIcon from "../../../assets/svgs/status-icons/error.svg";
@@ -29,15 +29,10 @@ function BigNumberField({
  placeholder,
  label,
  isDisabled,
- id: propId,
  isReadOnly,
  name,
  ...props
 }: Readonly<BigNumberFieldComponentProps>) {
- // Generate an ID if one is not provided
- const generatedId = useId();
- const id = propId || generatedId;
-
  // Use our custom hook to get all the props and state
  const {
  inputProps,
@@ -48,7 +43,7 @@ function BigNumberField({
  descriptionProps,
  errorMessageProps,
  validationResult,
- } = useBigNumberField({ id, isDisabled, placeholder, isReadOnly, ...props });
+ } = useBigNumberField({ isDisabled, placeholder, isReadOnly, ...props });
 
  return (
  <div className={cn("flex w-[278px] flex-col", className)}>
@@ -69,7 +64,6 @@ function BigNumberField({
  <>
  <Input
  {...inputProps}
- id="BigNumberField"
  aria-errormessage="BigNumberFieldError"
  name={name}
  className={cn(

src/lib/form/bignumber-field/useBigNumberField.tsx

@@ -7,6 +7,7 @@ import React, {
  FocusEvent,
  useRef,
  useCallback,
+ useId,
 } from "react";
 import BigNumber from "bignumber.js";
 
@@ -105,10 +106,14 @@ export function useBigNumberField(props: BigNumberFieldProps) {
  isDisabled,
  isReadOnly,
  isWheelDisabled,
- id,
+ id: propId,
  formatOptions,
  } = props;
 
+ // Generate an ID if one is not provided
+ const generatedId = useId();
+ const id = propId || generatedId;
+
  const formatBigNumber = useCallback(
  (value: BigNumber) =>
  value.toFormat({ ...DEFAULT_FORMAT, ...formatOptions }),
@@ -517,7 +522,7 @@ export function useBigNumberField(props: BigNumberFieldProps) {
 
  // prevent page scrolling when scrolling inside input
  useEffect(() => {
- const input = document.getElementById("BigNumberField");
+ const input = document.getElementById(id);
 
  const preventScroll = (e: globalThis.WheelEvent) => {
  if (input && document.activeElement === input) {
@@ -531,11 +536,11 @@ export function useBigNumberField(props: BigNumberFieldProps) {
  return () => {
  input?.removeEventListener("wheel", preventScroll);
  };
- }, []);
+ }, [id]);
 
  // Handle wheel events
  const handleWheel = (e: WheelEvent<HTMLInputElement>) => {
- const input = document.getElementById("BigNumberField");
+ const input = document.getElementById(id);
  if (
  isDisabled ||
  isReadOnly ||