Wait Until Element Is Focused

[tgf-coder]

I am working on a custom command that injects a custom dialog into the dom which asks a user, if the test reaches a certain failed state, what they tried to fix the condition and if that worked or failed (through pass/fail buttons). Then it saves their log to the reports and continues with the tests. This is the command

Cypress.Commands.add('manualTest', (message) => {
  const doc = cy.state('document')
  const body = doc.body;
  Cypress.$(body).append('<div id="myModal" style="display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4)">'+
  '<div style="background-color: #fefefe; margin: auto;padding: 20px; border: 1px solid #888; width: 80%;">' +
    '<span class="close">&times;</span>' +
    '<h1>Try the following steps: ' + message + '</h1>' +
        '<input type="text" id="progressTxt"></input><br>'+
        '<input type="button" id="passBtn" value="Pass"></input>' +
        '<input type="button" id="failBtn" value="Fail"></input>' +
  '</div>' +
'</div>');

  var logValue = "";
  Cypress.$("#myModal").css("display", "block");
  Cypress.$("#passBtn").focus(function() {
     logValue = "PASSED TEST. LOG: " + Cypress.$("#progressTxt").val();
     cy.addContext(logValue);
  });
  Cypress.$("#failBtn").focus(function() {
    logValue = "FAILED TEST. LOG: " + Cypress.$("#progressTxt").val();
    cy.addContext(logValue);
 });
//  cy.addContext(logValue).waitUntil(() => logValue != "");

 cy.waitUntil(() => cy.focused().then($el => $el.val() == "Pass" || $el.val() == "Fail"));
 
})

So far I have two specs. One of them uses the command successfully, the other says:

Cypress detected that you returned a promise from a command while also invoking one or more cy commands in that promise.

The command that returned the promise was:

  > cy.wait()

The cy command you invoked inside the promise was:

  > cy.addContext()

How can I fix this issue?