I have a trash in my app where you can filter through all the deleted entities and restore them. I use react-select for choosing specific entity type, eg. user, user_role, segment etc.
The react-select option looks like:
export type TrashFilterOption = {
label: string
value: "user" | "user_role" | "segment" | ...
}
and for better user experience I show count of trashed entities in each option label, eg. Segments (3), Users (0) etc.
The problem is that when I restore some entity and update counts, it doesn't change in selected option label as you can see on the screenshot below (count updated in options dropdown correctly but not in selected option).
My question is how can I force react-select to rerender it? I've tried to make a workaround using key assigned to <ReactSelect> component but it didn't work out.
Related
I'm making a nested form builder that is dynamic.
This is the current project I'm working on: https://codesandbox.io/s/ava-dynamic-react-hook-form-ivgt40?file=/src/App.js
The issue I'm having is that when I swap or delete Groups, the values within the Group aren't properly set.
I believe it is due to the {...register()} and the altering ref on my Input Components, but I am not certain.
The form data.js file in the linked project at the top contains the form structure I wish to render.
list: {
id,
label,
control: "list" // identifier that this element is a list
creatable: boolean,
items: [
[elements], // group 1
[elements], // group 2
]
}
input: {
id,
label,
control: "input" // identifier that this element is a input
type: "text" // type of input
defaultValue,
rules: {
required: {
value: boolean,
message: string,
}
}
}
State management
You seem to be mixing places to that are keeping tracking of state.
You basicly have 2 types of state
State of the form values | this is stored in the react-hook-form
State of the sort order of form inputs | this is stored in your Element.jsx
By mixing these, you have to manually make sure they stay in sync
react-hook-form
When you're using react-hook-form. you're entrusting some state management to that hook.
They provide an API through register to keep track of the fields and values for the form.
Register takes a name as the first param.
This is the only handle you have for the form to identify fields.
A new name would be a new fields.
the problem
You're not keeping things in sync.
Changing the order will do a couple of things:
The current elementIdPath is something like Emailprofile.0.notifications.0.email.0.email-abcd123
Emailprofile.0.notifications.0.email.0.email-abcd123 is passed as name to the register.
click on the change order button
handleSwapListElements runs and changes the element via setElementItem
the elementIdPath changes: Emailprofile.0.notifications.0.email.1.email-abcd123 (notice index change from 0 to 1)
New name is registerd and treated as a new field
the old field is also still registered and in state. clicking submit will also have the old name and value.
The fix
Keep the sort order and values in sync. You'll have to decide yourself how exactly to do that.
either:
don't include sort order or indexes as key in the name.
manually keep things in sync using react-hook-form methods.
Both have their ups and downs.
not including indexes as key
A dynamic form without indexes would require you to attach all that information on the field itself.
Basically you would register a unique key (uuid), and keep track of the uuid path yourself.
IE you register to properties.:
{
"abcd123-value" : "some#email.de",
"abcd123-path" : "Emailprofile.0.notifications.0.email.0.email-abcd123" // this would not be shown to the user, but still exposed to the form, in the submit you would manually combine the information again.
}
manually keep things in sync using react-hook-form methods.
Whenever you change the name of a field, you would get the current value.
unregister the old name and set the value on the new name.
react-hook-form exposes a method from the hook for that.
unregister
and setValue
If it where up to me, and seeing your code.I would probably try to go in this direction as opposed to refactoring to things to remove the indexes from name.
sandbox
this sandbox with modifications should paint the picture.
It will not properly work yet for the base elements, but the nodes at profile.0.notification.0.email should function.
Hi #all I have lightning record edit form which are showing specific value one of them is a recordtype. I want to update the recordtype from the same as other fields are updating but when I click on recordtype field it shows me the below error:-
[LWC component's #wire target property or method threw an error during value provisioning. Original error:
[Field: RecordTypeId is not a valid lookup field.]]
Record Type change is a critical operation that messes everything up. Potentially you're looking at new page layout (incl required/readonly fields), new picklist dependencies... There's reason why you select it first before any layout is displayed. And why record type change is a special button, not a field visible on normal edit action.
If you know what you're doing, are confident the requirements won't change / you'll know how to represent the changed layouts, picklists etc...
Use getObjectInfo to pull (among others) the Map of record types.
Use this data to build lightning-combobox that onchange updates a helper variable (you'd ideally have that variable bound to <lightning-record-edit-form record-id={recordId} record-type-id={recordTypeId}
Have a custom handleSubmit in the record-edit-form in which you'd intercept the save, prepopulate the field and then submit.
I am using Material UI Multiple Select based on documentation example. I need to save id of the selected option and show name,
I have tried many ways but nothing helps.
I need to store the id and Display the value. Please help me with your guidance.
Here is my codesandbox link
I was wondering about the same and the only way I found to make it work is by transforming the array to an object.
Here goes the sandbox: https://codesandbox.io/s/material-demo-5cy6p
In it you can see how names is no longer an array but an object with the value of the menu option as a key and the name you want to actual show as the value:
const names = {
1: 'Lorem',
2: 'Ipsum',
}
This way you can access the value(the name) in O(1) time (if you are not familiar with the Big O notation gives this a read: https://en.wikipedia.org/wiki/Big_O_notation), this is way faster than going through the whole array looking for an object with the same id as the one you are mapping.
I have a form variable of type external API called customersList. It is a list of customer objects. In my form, I have a Customer Name and Customer Id. For the Customer Name, I use an auto-complete widget. So, when I type something in the Customer Name field, it will give me a list of suggestions. When I click on one of the suggestion, I want the Customer Id field automatically populated with the information corresponding to the name I choose.
For example, the first object of a customersList variable which is:
customersList[0] = { "customerName" = "One Time Customer", "customerNumber" = "0000" }
Thus, when I choose Customer Name field to be One Time Customer, I want the Customer Id to be set to 0000 automatically.
I set the value of the Customer Id field to be customersList[0].customerNumber. But, it is static.
(please note: customerNumber represents Customer Id)
Any tips on how to do it?
Sadly the default autocomplete widget won't let you achieve such use case.
In fact the default autocomplete widget can take a list of JSON object as "Available values", can use one of the attribute of those objects as the display value ("Displayed key" property) and use it for autocompletion but it will only store this value (i.e. the one being displayed).
In your use case it means that you can use your customersList for "Available values" and customerName for "Displayed key" but you will only be able to save the customerName in "Value".
The good news is that a custom widget that do just what you want is available as a community contribution. Checkout the project page to download it and then import it in your UI Designer. An example of usage of this custom widget is also available for download from the project releases.
I have Custom Picklist on Lead object. lead object has got three record type and all record type having default values i.e -auswahl- specified in it works fine and shows defualt value. from field also i have made -auswahl- fild as default but the problem is that still it shows -None- in picklist i want to remove -none- from picklist.
picklist shows option like below.
-auswahl- (default)
-none-
secondvalue
thirdvalue
(Making picklist required from page layout doesn't solve problem.)
Setup -> Customize -> Leads -> Fields -> [your Custom Picklist name].
The very bottom section named 'Picklist Values'. Press 'edit' action in front of value which you want to make default. Check 'Defaul' checkbox. Save.
I could suggest one tweak if removing '--None--' is very necessary. Although I will not recommend.
Remove the field from Page Layout
Create one field in Lead object
Create a inline VF page for this particular field
Onload of inline VF page you can run a javascript for removing '--None--' node from select option list
Also you will have to couple the value inserted/edited by User in the vf page with the field created in step 2 using onchange event of picklist ie. again using javascript
Override save button in the standard pae and set the value of picklist using field created in step 2
I have not tried the solution but pretty sure this will work. Let me know if you need this workaround. I will post the code after trying at my end.