Selected value does not get populated on ui-select fields with type = reference
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 3.9k
- Forks
- 703
- PR merge metrics
- No merged PRs in 30d
Description
The problem I'm having is on edition/creation forms that have ui-select fields populated from a reference, there is no default option being pre-populated even though one is set.
For example, I have a subscriptions entity form with ui-select box that should be populated with an associated user.
subscription.creationView().fields([
nga.field('user_id', 'reference')
.label('User')
.targetEntity(nga.entity('users'))
.targetField(nga.field('email'))
.sortField('email')
.sortDir('ASC')
.remoteComplete(true, {
refreshDelay: 200,
searchQuery: function(search) { return { q: search }; }
}),
I can verify the first api is returning the user that should be pre-selected:
/users/536882ace3b04f561d081328
Then the dropdown option choices get populated by a second api call:
/users?order=ASC&page=1&page_size=30&sort=email
Notice this only gets the first 30 options by default. But, if the pre-selected user is not included in that first 30 results, then there will be no selected value pre-populated and the ui-select will be empty. I can also verify that when the selected user does get returned in the first 30 results, then it will be pre-populated as expected.
From past experience, I'm guessing this is caused by a long standing bug in the Angular ui-select library.
https://github.com/angular-ui/ui-select/issues/404#issuecomment-72261115
Since there is no fix for this bug yet, I think the best solution would be to somehow append the pre-selected option returned from the first api call into the options returned by the second api call. So in the example above, the user returned from the call to /users/:id would get pushed onto the 30 results returned from /users. Then the default option would start showing up.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by tracing the reference field handling used by creationView(), especially targetEntity(), remoteComplete(), and the two users API requests described in the issue. Reproduce the case where the selected user is outside the first 30 options, then verify that the selected value remains populated and visible in the ui-select.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100