[BUG] UI: Resizing window can lead to modal closing, losing user inputs

[whateverforever]

Describe the bug

If you resize the window with a "Launch Task" modal open, it will close the modal when the layout switches. E.g. making the window snap to the left half of the screen, or a quarter of the screen. This leads to the user inputs disappearing.

Expected behavior

The webpage reflows together with the modal, not deleting my input

Additional context to reproduce

1. Go to tasks
2. "Launch Task"
3. Enter some details in the modal
4. Resize the window until the layout changes (responsive)
5. Notice that the user inputs are gone

Screenshots

No response

Are you sure this issue hasn't been raised already?

• [X] Yes

Have you read the Code of Conduct?

• [X] Yes

[welcome[bot]]

Thank you for opening your first issue here! 🛠

[dosubot[bot]]

To address the issue where resizing the window causes the "Launch Task" modal to close and lose user inputs, you can implement a solution that preserves the modal state and user inputs across window resizes. This involves storing the modal state and user inputs when the modal is opened and restoring them when the window is resized. Here's how you can do it:

1. Save Modal State and Inputs: Create functions to save the current state of the modal and the inputs within it. Use localStorage to store this data.

2. Restore Modal State and Inputs on Resize: Implement a function that restores the modal state and inputs from localStorage when the window is resized.

3. Hook into Modal Open/Close Events: Ensure that the modal state is saved every time the modal is opened or closed.

Here's a simplified example of how this could be implemented in JavaScript:

// Save modal state and inputs
function saveModalState() {
  const modal = document.getElementById('launchTaskModal');
  const isOpen = !!modal && modal.style.display === 'block';
  const inputs = modal.querySelectorAll('input, textarea');
  const inputValues = Array.from(inputs).map(input => input.value);

  localStorage.setItem('modalState', JSON.stringify({ isOpen, inputValues }));
}

// Restore modal state and inputs
function restoreModalState() {
  const savedState = localStorage.getItem('modalState');
  if (savedState) {
    const { isOpen, inputValues } = JSON.parse(savedState);
    const modal = document.getElementById('launchTaskModal');
    const inputs = modal.querySelectorAll('input, textarea');

    if (isOpen) {
      modal.style.display = 'block';
      inputValues.forEach((value, index) => {
        if (inputs[index]) inputs[index].value = value;
      });
    }
  }
}

// Example event listeners for window resize, modal open, and modal close
window.addEventListener('resize', restoreModalState);
document.getElementById('yourOpenModalButtonId').addEventListener('click', () => {
  document.getElementById('launchTaskModal').style.display = 'block';
  saveModalState();
});
document.getElementById('yourCloseModalButtonId').addEventListener('click', () => {
  document.getElementById('launchTaskModal').style.display = 'none';
  saveModalState();
});

// Restore modal state on page load
document.addEventListener('DOMContentLoaded', restoreModalState);

Adjust the code to match your modal's implementation details, such as the correct IDs and how your modal's visibility is managed. This approach ensures that the user's inputs and the modal's open state are preserved during window resizes, addressing the issue you've encountered.

Sources

• docs/_static/custom.js
• flyteidl/gen/pb-es/flyteidl/admin/launch_plan_pb.ts
• docs/concepts/console.rst

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[jsonporter]

Ah, I see what you're saying. Unfortunately my team doesn't have the bandwidth to fix this at the moment but we'll keep this as an active issue in our backlog and perhaps someone from the community can pick it up.