Skip to content

Error with getBoundingClientRect #213

@aralroca

Description

@aralroca

It's crashing with this error:

Image

<Popover
    isOpen={isOpen}
    content={
      <form
        ref={formRef}
        id={id}
        onClick={(e) => e.stopPropagation()}
        onSubmit={onSubmit}
        class={style.popover}
      >
        <ul>
          {calcAmounts(step).map((amount) => (
            <li key={amount}>
              <button
                type="submit"
                class={cn({
                  [style.active]: amount === qty
                })}
                onKeyDown={(e) => {
                  if (e.key !== 'Enter') return;
                  setQty(amount);
                }}
                onMouseUp={(e) => {
                  e.stopPropagation();
                  setQty(amount);
                }}
              >
                {amount}
              </button>
            </li>
          ))}
        </ul>
        <fieldset>
          <input
            type="number"
            min={0}
            step={step}
            onInput={(e) => {
              const input = e.target as HTMLInputElement;
              const newValue = input.valueAsNumber;

              if (newValue % step !== 0) {
                input.setCustomValidity(
                  `The value should be multiple of ${step}.`
                );
              } else {
                input.setCustomValidity('');
                setQty(newValue);
              }

              input.reportValidity();
            }}
            name="quantity"
            value={qty}
            placeholder="Choose the quantity"
          />
          <button type="submit">OK</button>
        </fieldset>
      </form>
    }
    positions={['top', 'left']}
  >
    <ButtonQuantity
      title={title}
      quantity={qty}
      className={style.popoverTarget}
      size={'medium' as any}
      variant="add"
      disabled={isDisabled}
      onClick={(e) => {
        e.stopPropagation();
        setIsOpen((v) => !v);
        if (qty) return;
        setQty(step);
        updateItem(productId, step);
      }}
    />
  </Popover>

Note: I'm using Preact. Can be for that?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions