New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Funny-looking date picker in repeated grid #3888

Closed
ebruchez opened this Issue Jan 11, 2019 · 2 comments

Comments

Projects
2 participants
@ebruchez
Copy link
Collaborator

ebruchez commented Jan 11, 2019

I added a couple of iterations and got this.

screen shot 2019-01-11 at 2 49 48 pm

+1 from customer

@avernet

This comment has been minimized.

Copy link
Collaborator

avernet commented Jan 18, 2019

The issue stems from the order in which operations are happening. The date initialization code assumes that by the time it runs the markup is present in the DOM. This is the case when the page loads, however it is only partially the case when a new iteration is added. This is because in the Ajax response we have the following elements in this order (just mentioning here the relevant ones):

  1. Creating markup for new iteration: <xxf:copy-repeat-template id="section-1-section≡grid-2-grid≡grid-2-grid-repeat" parent-indexes="" start-suffix="2" end-suffix="2"/>
  2. Initialize the date component: <xxf:control id="section-1-section≡grid-2-grid≡control-2-control⊙2" class="fr-grid-1-1" init="true"/>
  3. Add classes on elements inside the date component: <xxf:control class="input-append date fr-field-width-natural" id="section-1-section≡grid-2-grid≡control-2-control≡xf-659⊙2"/>

Would there be a way for the server to send those in a different order so changes to the DOM inside the component are done before the component is initialized, as is the case when the page is loaded?

The alternative would be to detect this situation in the date initialization code, and delay the initialization until the DOM is ready, but his has 2 downsides:

  1. Looking for missing classes looks like guesswork.
  2. Potentially, similar but different code would need to be done for each component.
@ebruchez

This comment has been minimized.

Copy link
Collaborator Author

ebruchez commented Jan 21, 2019

In ControlsComparator, we iterate controls, output diffs for those if needed. Then we check descendants. Here, what happens for the new fr:date control:

  • ControlsComparator.outputSingleControlDiffIfNeeded()
  • ControlAjaxSupport.outputAjaxDiff()
  • XFormsComponentControl.addAjaxAttributes()
    • outputs the init attribute
  • then the descendants of fr:date information comes

What we'd like is the init to come after the descendants have been processed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment