Skip to content
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

Conditional questions causing plans to disapear #3163

Closed
mariapraetzellis opened this issue Apr 25, 2022 · 9 comments
Closed

Conditional questions causing plans to disapear #3163

mariapraetzellis opened this issue Apr 25, 2022 · 9 comments
Assignees
Labels

Comments

@mariapraetzellis
Copy link

Plans that include a conditional question are disappearing. For example, a user can successfully create a plan from a template including a conditional question, but when they go back to view the plan, the plan will disappear from the page.

We temporarily fixed this issue by removing the conditional question from the template, but I believe this bug will be affecting all plans that include conditional questions.

@johnpinto1
Copy link
Contributor

@raycarrick-ed This seems to be related to issue I noticed when dealing with a bug for Maastricht. The plan sections container continues to have style="display:none". Will investigate.

@johnpinto1
Copy link
Contributor

@mariapraetzellis, @briri Not yet identified cause, but working on it. As I have an example which fails.

@johnpinto1
Copy link
Contributor

johnpinto1 commented Apr 26, 2022

@briri Just trying out things. I think the issue is in app/views/phases/edit.html.erb
Then clicking the "Write Plan" tab results

Before (code change)
Selection_004

Selection_005

After minor code change to app/views/phases/edit.html.erb based on app/views/contributors/index.html.erb

<% title "#{plan.title} - Write plan" %>
<div class="row">
  <div class="col-md-12">
    <h1><%= plan.title %></h1>
  </div>
</div>

<% content_for :plan_tab_body do %>
<div class="row">
  <div class="col-md-12">
    <%= render partial: 'phases/edit_plan_answers',
               locals: {
                 plan: plan,
                 phase: phase,
                 answers: answers,
                 readonly: readonly,
                 base_template_org: base_template_org,
                 guidance_presenter: guidance_presenter,
               } %>
  </div>
</div>
<% end %>

<%= render partial: "plans/navigation", locals: { plan: plan } %>

Results in
Selection_003

The content still has "display:none" but navigation tabs appear. Not sure why this display:none persists.
Selection_006

@johnpinto1
Copy link
Contributor

johnpinto1 commented Apr 26, 2022

Just proved in broken case cause the rendering causes everything in content_for to be surrounded by a display:none block even though content exists. Not sure if it is a timing issue.

<%= render partial: 'phases/edit_plan_answers',
             locals: {
               plan: plan,
               phase: phase,
               answers: answers,
               readonly: readonly,
               base_template_org: base_template_org,
               guidance_presenter: guidance_presenter,
             } %>

@briri
Copy link
Contributor

briri commented Apr 26, 2022

Thanks for digging into this one @johnpinto1. Based on what you've found so far, I suspect that there is something in the JS that is hiding the entire panel instead of just the conditional questions it should be targeting.

This bit attempts to hide questions if they've met the condition:

// hide already removed questions on load

That calls a function that finds the closes class="row".

export const getQuestionDiv = (id) => $(`#answer-form-${id}`).closest('.row');

One of the recent updates might have changed the class definitions on this page. There must be a class name that's more appropriate that we can use here that will give us the correct dom element. Note that closest searches the dom tree in an upward direction aka parents of the element, so another option would be to switch it to .find('ror') which searches the child elements. or .siblings('row') which would search all adjacent elements.
If not, you could always add one. Be sure to check if that getQuestionDiv function is used anywhere else and make sure a change there won't break something else on the page.

@johnpinto1
Copy link
Contributor

Thanks @briri. A cursory test shows commenting out hide questions fixes issue.

Will tomorrow dig deeper as suggested in your comment.

johnpinto1 pushed a commit that referenced this issue Apr 27, 2022
…o disappear."

Cause is commit bb5941e
"Added toggleable guidance/comments section"  the following changes were made
to file  app/javascript/src/utils/sectionUpdate.js:
the question containers classes where changed as follows .row -> .question-body & .col-md-8 -> .question-section:

-                <div class="row">
-                  <div class="col-md-8">
+                <div class="question-body">
+                  <div class="question-section">

This broke the function getQuestionDiv() in app/javascript/src/utils/sectionUpdate.js.
Fix for issue #3163.

Changes:
- in  app/javascript/src/utils/sectionUpdate.js the function was updated
as follows:
-export const getQuestionDiv = (id) => $(`#answer-form-${id}`).closest('.row');
+export const getQuestionDiv = (id) => $(`#answer-form-${id}`).closest('.question-body');
johnpinto1 pushed a commit that referenced this issue Apr 27, 2022
…o disappear."

Cause is commit bb5941e
"Added toggleable guidance/comments section"  the following changes were made
to file  app/javascript/src/utils/sectionUpdate.js:
the question containers classes were changed as follows .row -> .question-body & .col-md-8 -> .question-section:

-                <div class="row">
-                  <div class="col-md-8">
+                <div class="question-body">
+                  <div class="question-section">

This broke the function getQuestionDiv() in app/javascript/src/utils/sectionUpdate.js.
Fix for issue #3163.

Changes:
- in  app/javascript/src/utils/sectionUpdate.js the function was updated
as follows:
-export const getQuestionDiv = (id) => $(`#answer-form-${id}`).closest('.row');
+export const getQuestionDiv = (id) => $(`#answer-form-${id}`).closest('.question-body');
briri added a commit that referenced this issue Apr 28, 2022
…ns_causing_plans_display_none

Roadmap bug #3163 -  Fix for bug "Conditional question causing plans …
@pherterich
Copy link

I think @raycarrick-ed added this to the latest release, so I will close out here.

@pherterich
Copy link

It is patched and part of release 3.1.1 proper

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants