Hello,
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">
<head>
<style>
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;
}
</style>
</head>
<body>
<script>
// 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
window.Retool.triggerQuery('setTableFilter');
}
// 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; }';
document.body.appendChild(inputElement);
</script>
</body>
</html>
