useDateFieldState state setter

[Darmun]

Hello,

recently I've been working on custom Datepicker which would work with Calendar placed in container which doesn't block interactions with other elements on the page, and which is visible when focused on an input.

However I stumbled on problem with updating state of input fields: for some reason if input is clear, without any value, it won't update value, when I try to invoke state.setValue destructured from useDateFieldState from button/RAC Calendar. Here is codesandbox with reproduction, and below code I wrote for this.

To reproduce, try click button with set date label. Despite an action, input will not update.

It works fine, if first value is set manually, and then button is used.

import { createCalendar, parseDate } from "@internationalized/date";
import { useRef } from "react";
import { useDateField, useDateSegment, useLocale } from "react-aria";
import { useDateFieldState } from "react-stately";

export function DateField(props) {
  const { label, ...rest } = props;
  const { locale } = useLocale();

  const state = useDateFieldState({
    ...rest,
    locale,
    createCalendar
  });

  const ref = useRef(null);
  const { labelProps, fieldProps } = useDateField(props, state, ref);

  return (
    <div
      className="wrapper"
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-start"
      }}
    >
      <span {...labelProps}>{label || "fallback label"}</span>
      <div
        {...fieldProps}
        ref={ref}
        className="field"
        style={{
          display: "inline-flex",
          padding: "2px 4px",
          border: "1px solid black",
          borderRadius: "2px"
        }}
      >
        {state.segments.map((segment, i) => (
          <DateSegment key={segment.type} segment={segment} state={state} />
        ))}
      </div>
      <button onClick={() => state.setValue(parseDate("2023-07-07"))}>
        set date
      </button>
    </div>
  );
}

function DateSegment({ segment, state }) {
  const ref = useRef(null);
  const { segmentProps } = useDateSegment(segment, state, ref);

  return (
    <div
      {...segmentProps}
      ref={ref}
      className={`segment ${segment.isPlaceholder ? "placeholder" : ""}`}
    >
      {segment.text}
    </div>
  );
}

Is there a mistake in the example? Or am I missing something?

[reidbarber]

It seems like here we aren't accounting for the value being set externally here.

react-spectrum/packages/@react-stately/datepicker/src/useDateFieldState.ts

Lines 239 to 246 in 84a1f0f

	if (Object.keys(validSegments).length >= Object.keys(allSegments).length) {
	// The display calendar should not have any effect on the emitted value.
	// Emit dates in the same calendar as the original value, if any, otherwise gregorian.
	newValue = toCalendar(newValue, v?.calendar || new GregorianCalendar());
	setDate(newValue);
	} else {
	setPlaceholderDate(newValue);
	}

[reidbarber]

I've went ahead and converted this into an issue at #4791