Dropdowns condicionais com react-final-form e react-select usando parse e format

Question

Esta é uma questão de acompanhamento para várias questões semelhantes , mas a solução encontrada ( componente por Erik Rasmussen ) não parece funcionar para as opções selecionadas manipuladas por análise e formato .<PickOptions />

Eu quero "nivelar" os objetos de opções apenas em seus valores ao armazenar no estado do formulário (e transformá-los novamente em objetos de opções para renderização com react-select), então fiz o seguinte:

const SelectAdapter = ({ input, ...rest }) => (
  <Select {...input} {...rest} searchable />
);

const options = [
  { value: "two-a", label: "Two A" },
  { value: "two-b", label: "Two B" }
];

<Field
  name={fieldName}
  component={SelectAdapter}
  options={options}
  parse={(formattedOption) => formattedOption ? formattedOption.value : undefined}
  format={(parsedValue) => options.find((option) => option.value === parsedValue)}
/>

E mudou uma linha PickOptionsassim:

-const aValue = aField.input.value.value;
+const aValue = aField.input.value;

Agora PickOptionsparece limpar corretamente o valor do campo de seleção filho / dependente no que diz respeito ao estado / valores da forma react-final, mas ainda renderiza o valor antigo no campo de seleção e não consigo descobrir o porquê. Qualquer ajuda seria muito apreciada! Desde já, obrigado.

CodeSandbox demonstrando o problema : escolha uma opção na primeira lista suspensa e, em seguida, escolha uma opção na segunda lista suspensa. Em seguida, altere o primeiro menu suspenso para a outra opção. Deve limpar a segunda lista suspensa (você notará que limpa o valor real no formulário, nos valores impressos abaixo das entradas, mas deixa o texto do rótulo antigo da opção selecionada anteriormente na segunda lista suspensa / secundária). Você também pode notar que o botão Reiniciar esvazia os valores do formulário internamente, mas não apaga as entradas. A mesma causa raiz, estou assumindo.

(editar) Solução de Super Hacky?

const SelectAdapter = ({ input, ...rest }) => {
  const [hack, setHack] = React.useState(0);

  React.useEffect(() => {
    if (rest.options) setHack((hack) => hack + 1);
  }, [rest.options]);

  return <Select key={hack} {...input} {...rest} searchable />;
};

Answer 1

Não tenho certeza. Se você console.log()o optionsquando o processamento childOption, eles fazem a mudança. Então, talvez react-selectseja ignorar as mudanças no optionssuporte? Não parece ser um problema com RFF, pelo que posso dizer.