I am trying to create a list of dropdowns which can be reordered by dragging them. For drag and drop i am using react-sortable-hoc. Here i am attaching a working sample. Link for sample
To reproduce the issue, Select value in first dropdown by mouse or keyboard. after that drag that element (first dropdown) and drop it at 3rd or 4th position then you observed that dropped dropdown will not persist the value. Selected value displayed at first element. What could be the cause for this? How can i fix it?
You need to pass onSortEnd handler to your srotableContainer as props
<List items={this.state.items} onSortEnd={this.onSortEnd}/>;
I also suggest you add a key on your Item
<Item key={item} data={item} index={index} />
Here is the forked sandbox where it is working:
https://codesandbox.io/s/adoring-raman-l72xw?fontsize=14
Related
I'm writing a user management using react-admin and try to make adding users to groups easier, i.e. by adding groups from a user's edit page using auto-complete. Starting with an example, I've got some success using the following:
<ReferenceArrayInput
label="Group"
source="groups"
reference="groups"
>
<AutocompleteArrayInput
{...props}
resettable={true}
allowEmpty={true}
optionText="name"
fullWidth
/>
</ReferenceArrayInput>
However, this method uses Chip component to display selected items inline. I would like to use a Datagrid instead. I know from the source code that I cannot override the display part of an auto-complete (yet?), so I thought I could resort to hiding Chips via CSS, but I would still need a way to display a Datagrid with current selection. So I tried this (it's wrapped in FormWithRedirect, hence formProps):
<ReferenceArrayField
{...formProps}
label="Group"
source="groups"
reference="groups"
>
<Datagrid>
<TextField source="name" />
</Datagrid>
</ReferenceArrayField>
<ReferenceArrayInput
{...formProps}
label="Group"
source="groups"
reference="groups"
>
<AutocompleteArrayInput
resettable={true}
allowEmpty={true}
optionText="name"
fullWidth
/>
</ReferenceArrayInput>
This works almost exactly as I want it, a Datagrid is displayed and it shows the right data for the selection, however, it's not updated when selected items on AutocompleteArrayInput change. How ever I tried (been through probably all the hooks and contexts), I could not make it work.
Is this possible? How can I make Datagrid update when selection changes on AutocompleteArrayInput?
Problem:
I have an ion-select and in the controller when the user does something, I populate the ion-select with 1 value and make that value the selected value. The ion-select does not show that the value has been selected, but the [(ngModel)] has the correct value. When I open the ion-select it shows the value in the list and it is selected, when selecting the value in the list again it goes over the ion-select label.
How can I populate the ion-select with a value and make the populated value the selected value so that it shows on the ion-select as a selected item?
Screenshots:
The Make has value of CHEVROLET but it does not show as selected by ion-select:
When tapping on ion-select, it shows the CHEVROLET as selected and CHEVROLET goes over the Make label:
HTML:
<ion-item>
<ion-label position="floating">
<span class="required">* </span>Make
</ion-label>
<ion-select [interfaceOptions]="global.compactAlertOptions" id="make" [(ngModel)]="global.valuation.vehicle.make" name="make" #makeRef="ngModel" required>
<ion-select-option *ngFor="let make of makes">{{make}}</ion-select-option>
</ion-select>
</ion-item>
<ion-label *ngIf="makeRef.touched && makeRef.invalid && makeRef.errors.required" class="error">Make is required</ion-label>
Controller:
Modal Controller (the Make gets set in a popup modal):
this.global.valuation.vehicle.make = this.vehicleDetails.VehicleMake;
Populate the ion-select options in parent controller:
this.makes = [this.global.valuation.vehicle.make];
This generally happens when the value in ngModel is set before <ion-select-option> options are loaded on the DOM.
You will have to explicitly delay setting the value to ngModel until the <ion-select> and options are loaded on the DOM.
You can achieve it by adding a setTimeout in your component file and assign the ngModel value in the callback of setTimeout.
It seems to me that this has to do with some custom css that you are using on the template. Since when you use floating for a select is exactly the same as when you use stacked, Since the select is going to expand on the ion-item anyway. This floating works best with ion-input.
In your case, if the option was not selected, the select should be empty and the label above it. but it is on the item furthermore on the baseline of the select. When you select the option it will show in the baseline on the select left aligned.
like this:
If you remove the floating you will see what I mean.
it should show like this:
It will be easier to understand the issue if you just provide the CSS bits that are messing with the alignment of the elements.
My guess is that you have some styles that only reduce the ion-item and don't deal with alignment and positioning of the inner elements.
I'm trying to find a way to add a new value using v-select previously not in the list. So that the new value entered will become the selected option.
This is my current code:
<v-select
ref="systemSelect"
v-model="reservation.system"
name="system"
label="Select System"
:disabled="isBusy"
:options="systems"
#input="getSystems"
/>
In UI the component looks like this. Here I use Vuex only to get :options. Currently if I enter a new value and click outside that value disappears since its not found in the list
Expected: Would like to enter a new value and use this value as current in the form and save it. Is there a way to achieve this?
Any help would be appreciated.
Thanks!
If you're using vue select, you can use the attribute taggable and multiple to push your own options:
<v-select taggable multiple />
See this link:
https://vue-select.org/guide/values.html#tagging
It is possible to set the property undoable={false} for the Edit and Create component. This successfully disables the undo feature.
It seems as if this property is not applicable to the List view. Is that correct?
Use Case:
The user is in the List view. She selects an item and chooses to delete it. The delete shall not be undoable.
For List, the undoable property must be specified in DeleteButton:
<List {...props} >
<Datagrid>
...
<DeleteButton undoable={true} />
</Datagrid>
I need to get the entire array element that makes up the Autocomplete item, I want the element so I can store it in Veux without store each item, such as first name, MI last name etc. I'm going to build upon another question that was very similar that was posted here Vuetify v-select get item index and with the jsfiddle answer solution
my code that I'm using is:
<v-list-tile>
<v-autocomplete
v-model="data"
:allow-overflow="false"
:items="named_items"
:item-text="getFullName"
:loading="loadingMembers"
:debounce-search="0"
:search-input.sync="searchInput"
class="purple-input search-input"
default
color="purple"
autofocus
placeholder="Search..."
item-value="MemberID"
hide-no-data
no-data-text="Add New Member"
#change="changeMember"
#keyup.enter="hitEnter"
/>
</v-list-tile>
the jsfiddle is at https://jsfiddle.net/Roland1993/fg461d55/1/
and my question is when an item is selected is it possible to get the element that makes up the ID, Question and Answers? so the it can be stored as an array?
It is entirely possible, for example, you have already bound to events, but you can have the name or values of their targets.
See: Method Event handlers