Query Option -> Advanced -> 'Show a confirmation model before running', shows randomly when query is not triggered


I have a query with the advanced option 'show a confirmation model before running.' I have two versions (exact copies) of this application:

  • one with a custom numbers input field, and
  • one with a Retool numbers input field.

In the version with the custom input field, the advanced option of the query shows without even triggering the query. It randomly displays the confirmation message when clicking somewhere on the screen. The custom component has nothing to do with the query that has the confirmation modal. The query is not even triggered, but the modal shows randomly when clicking. Perhaps I am missing something...

This is the code of the custom numbers inputfield component

<!DOCTYPE html>
<html lang="en">
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;

    /* Update the color code for the placeholder text */
    input[type="tel"]::placeholder {
      color: #7E7E7E;

    /* Remove the outline on focus */
    input[type="tel"]:focus {
      outline: none;

    // Event handler for value changes
    function handleValueChange(event) {
      const inputValue = event.target.value.trim();
      const newValue = inputValue !== '' ? parseInt(inputValue, 10) : null;

      // Update model value
      window.Retool.modelUpdate({ value: newValue });

      // Trigger query100 or your relevant query

    // Render the custom Numbers Inputfield component
    const inputElement = document.createElement('input');
    inputElement.type = 'tel';
    inputElement.min = '0';
    inputElement.placeholder = 'Search by roomnumber...';
    inputElement.addEventListener('input', handleValueChange);

    // Add space between the border and the input value
    inputElement.style.cssText = 'padding: 1px; margin: 0; height: 2em; width: 300px; font-size: 12px; border: 1px solid #FFFFFF; color: #000000; border-radius: 0;';

    // Set a smaller font size for the placeholder text
    inputElement.style.cssText += '::placeholder { font-size: 12px; }';



I've created another copy and added the custom component. In that version, the bug doesn't exist. I have no idea what caused it, but I'm glad it's gone :wink:

1 Like