Repository: medusajs/medusa
File: packages/admin/dashboard/src/components/inputs/percentage-input/percentage-input.tsx (TypeScript)

Code before:
})
DeprecatedPercentageInput.displayName = "PercentageInput"

export const PercentageInput = forwardRef<
  ElementRef<"input">,
  ComponentProps<typeof Primitive> & { bypassDefaultDecimalScale?: boolean }
>(
  (
    {
      min = 0,
      decimalScale = 2,
      decimalsLimit,
      bypassDefaultDecimalScale = false,
      value,
      className,
      ...props
    },
    ref
  ) => {
    return (
      <div className="relative">
        <Primitive
          ref={ref as any} // dependency is typed incorrectly
          min={min}
          autoComplete="off"
          decimalScale={bypassDefaultDecimalScale ? undefined : decimalScale}
          decimalsLimit={decimalsLimit || decimalScale}
          value={value}
          {...props}
          className={clx(
            "caret-ui-fg-base bg-ui-bg-field shadow-buttons-neutral transition-fg txt-compact-small flex w-full select-none appearance-none items-center justify-between rounded-md px-2 py-1.5 pr-10 text-right outline-none",
            "placeholder:text-ui-fg-muted text-ui-fg-base",
            "hover:bg-ui-bg-field-hover",
            "focus-visible:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active",
            "aria-[invalid=true]:border-ui-border-error aria-[invalid=true]:shadow-borders-error",
            "invalid::border-ui-border-error invalid:shadow-borders-error",
            "disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
            className
          )}
        />
        <div className="absolute inset-y-0 right-0 z-10 flex w-8 items-center justify-center border-l">
          <Text
            className="text-ui-fg-muted"
            size="small"
            leading="compact"
            weight="plus"
          >
            %
          </Text>
        </div>
      </div>

Review comment (suggestion):
Ok so the property that was passed everywhere is `decimalScale`. And `decimalsLimit` was set to `decimalScale`. This made the percentage input look like this:
<img width="2278" height="332" alt="CleanShot 2025-09-03 at 12 50 01@2x" src="https://github.com/user-attachments/assets/8d31106b-0960-4dad-ba40-b5537e2da1fb" />


To avoid breaking changes, I did a bit of gymnastics. I made it so that `decimalsLimit` can be set independently from `decimalScale`. Setting `decimalsLimit` to 4 will allow the user to input up to 4 decimals without having the trailing 0s.

Code after:
      </div>
      <Input
        ref={ref}
        type="number"
        min={min}
        max={max}
        step={step}
        {...props}
        className="pl-10"
      />
    </div>
  )
})
DeprecatedPercentageInput.displayName = "PercentageInput"

export const PercentageInput = forwardRef<
  ElementRef<"input">,
  ComponentProps<typeof Primitive>
>(
  (
    {
      min = 0,
      max = 100,
      decimalScale,
      decimalsLimit,
      value,
      className,
      ...props
    },
    ref
  ) => {
    const resolvedDecimalScale = decimalScale ?? resolveDecimalScale(value)
    const resolvedDecimalsLimit = decimalsLimit ?? resolvedDecimalScale

    return (
      <div className="relative">
        <Primitive
          ref={ref as any} // dependency is typed incorrectly
          min={min}
          max={max}
          autoComplete="off"
          decimalScale={resolvedDecimalScale}
          decimalsLimit={resolvedDecimalsLimit}
          value={value}
          {...props}
          className={clx(
            "caret-ui-fg-base bg-ui-bg-field shadow-buttons-neutral transition-fg txt-compact-small flex w-full select-none appearance-none items-center justify-between rounded-md px-2 py-1.5 pl-10 text-left outline-none",
            "placeholder:text-ui-fg-muted text-ui-fg-base",
            "hover:bg-ui-bg-field-hover",
            "focus-visible:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active",
            "aria-[invalid=true]:border-ui-border-error aria-[invalid=true]:shadow-borders-error",