adobe / adobe/react-spectrum

ComboBox calls onSelectionChange with null value when helpers.setValue is used in Formik

Open
#4,621 8 comments 3 reactions 0 assignees View on GitHub
needs investigation
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

# 🐛 Bug Report

When using ComboBox with Formik and setting `onSelectionChange={helpers.setValue}` to set the Formik value onSelectionChange is called twice, first with the selected value and immediately after with null.

## 🤔 Expected Behavior

onSelectionChange should be called once with the selected value.

## 😯 Current Behavior

Currently it calls the callback with the selected value but then immediately calls it with null. This only happens when Formik is used.

## 💁 Possible Solution

Workarounds include using setTimeout (not sure why this works)or disabling Formik validation.

## 🔦 Context

Have to use the workaround to get ComboBox to work - weird problem that is hard to describe and keep remembering to fix whenever ComboBox is used with Formik.

Seems unlikely to be an issue with Formik, although Formik may be causing the component to be re-rendered more often than it should which could be a cause(?)

## 💻 Code Sample

Minimal example with examples of workarounds:

https://codesandbox.io/s/react-aria-combobox-issue-d5y4j2?file=/src/App.js

## 🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| react-aria | ^3.25.0
| react-stately | ^3.23.0
| react | 18.2.0
| react-dom | 18.2.0
| Browser | Chrome
| Operating System | MacOS

## 🧢 Your Company/Team

N/A

## 🕷 Tracking Issue (optional)

N/A

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.