I am using Cypress for test my Angular app. Here is my code from Cypress

// Declare alias for items
cy.intercept('POST', 'https://url/graphql', (req) => {
   if (req.body.hasOwnProperty('query') && req.body.query.includes('query product{')) {
      req.alias = 'products'
    }
})

cy.visit('/products')

// Wait for response
cy.wait('@products', { timeout: 15000 })
// Wait for the element in DOM is visible
cy.getBySel('open-row', { timeout: 15000 })

// Write the value into input
cy.getBySel('product-name-filter').should('be.visible').clear().type(productParent.create.name)

// Declare alias for filtered items
cy.intercept('POST', 'https://url/graphql', (req) => {
   if (req.body.hasOwnProperty('query') && req.body.query.includes('query product{')) {
      req.alias = 'filteredItems'
    }
})

// submit filter
cy.getBySel('submit-filter').eq(0).should('be.visible').click()

// Wait for the filteredItems
cy.wait('filteredItems', { timeout: 15000 }

// Wait for the element in DOM is visible
cy.getBySel('open-row', { timeout: 15000 }) // is not visible because there is no filtered items

When it fills the input, it also writes part of the value into another one specific input. These are inputs for filters, there are much more then just these two.

What i checked
I am marking right input.
I have one single input in my App marked as data-cy=”product-name-filter”

with cy.wait(1000) it works fine, but I would like to use better solution then wait specific time

I have tried
waiting just for intercept or just for the DOM
put away timeout
put away clear, put should, clear and type into separate rows
wait for another element in the DOM
use cy.wait(1000) – this works fine, but I would like to use intercept or wait for the DOM instead