marmelab / marmelab/ng-admin

Selected value does not get populated on ui-select fields with type = reference

Open
#831 2 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
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.

screen shot 2015-12-03 at 7 40 44 pm

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.