Is it possible to update a field value when a sibling field changes without saving/publishing?

gram3000

5 months ago

17

• 

  tinouti

  5 months ago

  Yup! Make a custom component and take advantage of the

  useFormFields

  hook. 🙌

  
  https://payloadcms.com/docs/admin/hooks#useformfields
• 

  gram3000

  5 months ago

  Would I use the custom component to watch the field and then update the other field?

  
  

  
  

  Or replace the default relationship field with a custom field?

• 

  tinouti

  5 months ago

  So let's say you have:

  
  

  - field A

  
  

  - field B (which value depends on field A)

  
  
  

  Field A is your regular field, and field B would be your custom component, in which you'd use

  useFormFields

  to rerender your component only when field A changes.

• 

  gram3000

  5 months ago

  Right, ok. In the past when I’ve tried to create a custom component with a relationship field I’ve had a some problems. Do you have any recommendation about how to use a relationship field in a custom component?

• 

  tinouti

  5 months ago

  Oh as in you want to dynamically change a relationship field based on the value of another field? Making your own custom one is definitely not as straightforward as if it was a text field, that's for sure. I've also never done something like this myself, so the amount of advice I can provide here is limited. You'd probably want to copy the relationship field's code directly from the Payload source code and make a custom one. I'd ask other folks if there might be a better way to "reuse" a default component though.

  
  
  

  Do you need that field to be editable by the user as well? And do you need that field to be visible in the UI? If not that'd make your custom component super simple.

  
  
  

  Other option, could you make use of the

  filterOptions

  config of your relationship field? (

  https://payloadcms.com/docs/fields/relationship#filtering-relationship-options

  )

  
  

  This wouldn't automatically select docs, but it would restrict the selectable docs to whatever you decide (you have access to

  siblingData

  in there to filter based on other fields).

• 

  gram3000

  5 months ago

  Ok, so I’ve got a filterOptions on the second relationship field but when the first field changes it doesn’t clear the second’s value even though the selected option doesn’t match any more.

  
  

  
  

  I would use validation to check the field on save but the UX isn’t good.

  
  

  
  

  Do you think the selected option not following the filteredOptions is a bug?

• 

  tinouti

  5 months ago

  Yeah I can see how that's not ideal from a UX PoV.

  
  

  
  

  It doesn't feel like it to me, sounds like it's doing what it's supposed to, which is filtering the options. 🤷‍♂️

• 

  gram3000

  5 months ago

  Hmm…

• 

  tinouti

  5 months ago

  Do you need the user to be able to edit that relationship field manually?

• 

  gram3000

  5 months ago

  Yeah

  
  

  
  

  They choose the first option which then filters the second field

  
  

  
  

  But if they change the first option the second maintains the same value which isn’t valid anymore

• 

  tinouti

  5 months ago

  Hmmm I see

• 

  gram3000

  5 months ago

  Maybe I should create an issue and see what the payload team would expect

• 

  tinouti

  5 months ago

  Oh wait, actually, I had assumed that

  filterOptions

  was purely for filtering the admin UI select options.

  
  

  But in the docs it says:

  
  

  which will be used both for validating input and filtering available relationships in the UI.
  

  
  

  Based on this, I wonder whether or not it'd be a good idea to automatically filter the field value based on the

  filterOptions

  rules. 🤔

  
  

  Could indeed be worth opening a feature request to get a discussion going.

• 

  gram3000

  5 months ago

  Feels like the next step to get some clarity on how filterOptions works. Thanks so much for going back and forth with me! I’ll link the issue here after I create it.

• 

  tinouti

  5 months ago

  Could also tag @denolfe to see if he has thoughts! 👀

  
  

  (you were the latest one replying in #community-help so the tag fell on you Elliot, sorry 😁 )

• 

  gram3000

  5 months ago

  I always feel bad for tagging the team 😆

• 

  edwardbc

  last month

  I wonder if this is can be considered an official bug.

  
  
  

  Example:

  
  
  

  1- You have options X,Y,Z and the user selects Y

  
  

  2- A state update causes filterOptions to now display only A,B,C or , M,N,O

  
  

  3 - The dropdown remains with the option Y selected

  
  
  

  Expected: when filterOptions() is executed, if the selected option is no longer available, clear the current selection/value of the dropdown.