I'm trying to use Vuetify's Autocomplete component to select a list of users from the database, searching by name. I want to allow selecting multiple users, with each user appearing as another chip in the autocomplete's input field.
It works fine for the first user selected, but then if I start to type the name of another user, when the search results are updated in the autocomplete component, if the first selected user was not included in the new search results, that user disappears from selected chips.
Here's an example of what happens:
Is there a way to maintain the selected options even if they are no longer included in the search results from the database?
So I found what I feel is an acceptable solution, though I'd love to know if there's a better one.
Basically instead of just overwriting the user search results with what I get from the database via api, I first append the selected results to the new search results. Something like this:
axios.get('/api/users/' + this.search)
.then(res => {
this.user.parents.forEach((id) => res.data.push(this.getSearchResultById(id)));
this.parentOptions = res.data;
});
getSearchResultById(id) {
return this.parentOptions.find((parent) => parent.id === id);
},
Use the props cache-items in your case. It keep the selected items in autocomplete viewable
Related
So I have an application with a dashboard and a main page that has a header. Both of them have a react-bootstrap-typeahead input to perform the same action - a search to open something on a map.
What I would like to achieve is:
when the user search something on the dashboard, the main page opens with the search result and on the header, the search input there shows what was searched on the other component.
on the other hand, when the user search something on the search input on the main page header, and then goes back to the dashboard, the dashboard search input should be prefilled with the value previously searched on the main page.
What I have tried so far:
So when the user picks a search item result, that string is saved on the application state using redux. I also clear it manually when the user clicks on the clear search button. The RBT component is defined to use this variable, as in:
<AsyncTypeahead defaultInputValue={props.currentSearchValue} ... />
This seams to work on the first time, i.e. when the user has not interacted with the other input yet. For example, with the application on a fresh state (just loaded) if on the dashboard I pick a search item, when going to the main page because that search input has not been touched yet. Then, when I pick a search item on the main page and go back to the dashboard, I wouldn't see it because setting defaultInputValue is not enough, as that input is not in its default state anymore.
Any tips? I have been running in circles so far. Tried the key/setKey workaround as described in another answer, but that wasn't enough to cover the case described on the previous paragraph. I also tried comparing the input value to the recorded value, but naturally when starting to typing with the input field the values would be different and therefore I cannot trigger a component reload based on that.
Thanks in advance.
Unless I'm missing something about your use case, the selected prop should do what you need. You can save the selected item(s) in your redux store and populate the typeahead with the value on the given page.
// Get the initial value from the store. This should be an array.
const typeaheadSelections = useSelector(...);
<Typeahead
...
onChange={(selected) => {
// Update the value in the store when the selection changes.
dispatch({
type: 'set-typeahead',
value: selected,
});
}}
selected={typeaheadSelections}
/>
I'm using the mui autocomplete component, but I made it to work like a stepper.
Every step, the user is presented with a new set of options.
Because of this, the component complains that none of the options match.
The thing is, I don't want the options to have matches.
There are 3 steps that can repeat over and over again, and the user should be able to select the same option multiple times.
I have it completely working except for this single error. I don't want to use the freeSolo prop, because I want the user to be restricted to the options at the current step.
I set isOptionEqualToValue={() => false}, which displays the select menu how I'd like, but it's still just throwing this warning. Is there a way to just disable this warning?
In Drupal 7, is there a way to change the standard edit form for a content type based on a certain content?
For example:
I have a content type with a checkbox...once it it checked and the form is saved, I do not want this checkbox to be visible anymore...therefore based on the checkboxes value in the Database I want to hide form fields when showing the form.
I am building a small specific project site, where a company wants to add projects, and their customers are supposed to follow certain steps (upload some content, provide information etc.), and also should be able to check off certain requirements, and once these are checked off, they should not be visible/editable to them.
Also the displayed form fields should depend on an user's role, and then FURTHER be limited depending on the content's database entries.
Is there a module, which could achieve this behaviour? "rules" and "field/permissions" come close to what I need, but are not sufficient. Or did I just miss the option to change a form field's accessibility based on conditions?
What I need is some place to define a logic like "IF (VALUEOF(CHECKBOX_1) == TRUE) THEN DO_NOT_SHOW(CHECKBOX_1)"
hook_form_alter is the way to do this, as explained by Mihaela, but what options do you have inside that function?
If you want just to disable field (it will be visible, but user can't change it) you can do it like this:
$form['field_myfield']['#disabled'] = TRUE;
And if you want it to be hidden, but to keep value it has before editing the way to do that is:
$form['field_myfield']['#access'] = FALSE;
I.e. hiding it (somewhere I saw someone suggesting that):
hide($form['field_myfield']);
really hides the field, but after that, when form is saved this field has empty value, validation fails, etc, so that's not a good way to do this. Hiding makes sense only if you want to print separately that field later, at some other place.
function your_module_form_alter(&$form, &$form_state, $form_id){
switch($form_id) {
case 'nameOfTheNode_node_form':
//your code here. check the value from from_state.
break;
}
}
In this case, I use module Conditional Fields https://www.drupal.org/project/conditional_fields
For example: If my Dependees field has a value, Dependent field can be visible/invisible, enabled/disabled, required/optional, checked/unchecked
I need to add a dropdown in the New Ticket Screen of OTRS. I managed to add a Dropdown by adding a Dynamic Field with the help of Dynamic Fields Management in Admin Section.
Now my problem is that I want to populate this Dropdown with data that I get from some distant database on the run and dependin on the User Loged In. How can i feed In this Dynamic Data in the DropDown List in OTRS ?
Thank you.
To do such a thing I do not believe is supported from the Dynamic Field UI provided by OTRS.
So you can either:
1- add all the possible values into the drop down box and then hide/show them using code changes in the dtl file. (use javascript).
For creating a new ticket there is either AgentTicketEmail.dtl or AgentTicketPhone.dtl.
There is also the CustomerTicketMessage.dtl if you want to include it in the customer interface too.
2- Add only one value which you can also hide using javascript in the dtl files and just add values to the dropdown list using javascript code.
Example javascript below hides/shows different dynamic fields. You can find what your dynamic field is called by looking at the page source from your browser.
function setdynamicviews(){
switch ($('#Dest').val() ) { //this is where the queue is relevant (Dest = Queue)
case "8\|\|Support": // need to slash escape the pipes
//show dynamic fields
document.getElementById('LabelDynamicField_Product').style.display = 'block';
document.getElementById('LabelDynamicField_SerialNo').style.display = 'block';
break;
default:
//hide dynamic fields.
document.getElementById('LabelDynamicField_Product').style.display = 'none';
document.getElementById('LabelDynamicField_SerialNo').style.display = 'none';
}
}
To add items to usign javascript see here
Yuu have not provided enough information for me to help with getting the information "from some distant database"
Note: if you do change any DTL files or other otrs files you should defrinitely create a theme first see here
Hope this helps.
I have a view with a number of exposed filters that I want to add an exposed filter for the author, so that the user can limit a list of nodes by the creator of the node (in addition to a number of other filters).
What I've done so far:
I've added an exposed filter of the author and set the operator to "contains any word" (so the usernames could just be a + separated list)
This is by default a text field, but I would like it to appear as a list of checkboxes (similar to taxonomy)
Using hook_form_alter I've added the following code to change it to a list of checkboxes (harcoded for now but I'll fix shortly)
$form['name']['#type'] = "select";
$form['name']['#size'] = "3";
$form['name']['#multiple'] = TRUE;
$form['name']['#options'] = array(
'admin' => 'admin',
'tyler' => 'tyler',
'test' => 'test'
);
$form['name']['#theme'] = "select_as_checkboxes";
When this form is submitted it changes the url to &name[]=tyler&name[]=admin, what I would like to do is combine these with a foreach so that url would look like &name=tyler+admin, but I'm really not sure how exactly to achieve this in the API.
I tried adding a function to $form['#submit'], and changing the value of the field in there, but that still didn't change the output.
Any advice?
Quick Edit
For the time being I have switched this to use radios instead of checkboxes, which solves the issue that I was having.
To break down the issue I was having a bit further, the names of the checkboxes where getting set to name[]= instead of name= because of the multiple inputs. The name filter in Views does not know how to handle multiple values for the name field.
For now I will see if this flies with the client, but if anybody has an answer for the original question of adding checkboxes for all authors to an exposed filter that would be awesome!
Use Better Exposed Filters module.