I have two searchfields for my table. One to search by name, and one to search by number.
The search by number field is of type number, however the database column with numbers is set as 'string', because sometimes the input data is other then a number for example A01, or 23C3.
I set the SQL mode to; 'run automatically' for both queries.
The query of the name searchfield runs automatically whenever there is any input, however the query of the numbers search field, does not. I have the click somewhere or press enter before it runs.
Hi @ellenhelena Thanks for reaching out! Are you using the on "Change" event? If so, it is expected to trigger whenever you click the up down stepper buttons, when you click away from the component after making a change, or when you click enter
We have an internal request to enable on change events to trigger any time a new value is typed into the component (without the need for clicking away or enter) - which would match the text input. I'll reach back out here when it ships!
Hi Tess,
Thank for the reply. I am not using the stepper buttons, as the end user at times has to go to 210 for example. I made them invisible. I just used a normal query to run it, see attached.
The number inputfield which I use as a searchfield. Together with a confirm button, it is the most important feature of the application. Hope this will be fixed soon
Also I was wondering, is there an overview somewhere, where I can see which features Retool is working on behind the scenes?
I really like working with Retool, however I've had several times where I got stuck and though it was due to my code, so I spend hours on it to fix it, just to discover that it wasn't my code but instead something that Retool was working on
It would be great if there is an overview, so when I get stuck I can check if it is something that is already in the pipeline, so I won't lose time...
Hi @ellenhelena Thanks for the feedback! I'm sorry to hear it's happened several times
If you ever need a gut check, you're always welcome to post a question on the forums or join office hours
We may expose our roadmap or current bugs in the future, but it's not something we're currently planning to do. I know we've gotten similar feedback from other users, so it's definitely something I'm asking about internally
Hello Tess,
Any update on this? I really need the number input field to run automatically when changing the input. At the moment I still need to press enter or click somewhere random...
Hi Tess,
Could you please check for me how long it approximately will take before this is fixed?
This is the most used functionality of our application - to search bynumber with the numbers input field. As the end users aren't used to click 'enter' after typing in the right number, the users can make mistakes by updating the wrong row. For example the last one selected or no row at all instead of the one typed into the numbers search field..
I have been waiting for two months for the update of this field. So if it's not going to be fixed, i'll have to re-design the application. Which is okee, but from UX perspective not preferred..
Would be great if you can check for me Ãf or when it will be fixed. Thanks
Unfortunately, since it hasn't been picked up by our team yet, I don't have a timeline. Things can certainly change, but as of now, this has not been prioritized as a ticket that will be solved in the near term I'd recommend exploring a custom component (or refactoring the app if you prefer)
Something like this could be pretty quick to implement (you could add css to make it look like the Retool components)
I think you could potentially solve your case with the .inputValue property - instead of the .value - to track user inputs. I tested it a bit & it looks like this should work well the one caveat I see is that if you have a clear input button on your number input component & the user clicks it, the inputValue is 0 instead of null
My validation rules for the number input are the following:
min value: 0
max value: 99
required: true
allow null: true
I disable the submit button with the following condition:
Disabled:
{{number_input.invalid}}
The problem is that when using the clear button of the number input component, even though the component is showing an empty box, the inputValue property goes to zero making the invalid condition (invalid property) false when it should be setting inputValue to null, making the invalid condition true.
That's not the case when deleting the numbers with the keyboard in which it presents a proper behavior.
I need to disable the submit button whether I delete the value with the clear button or the keyboard. If I use the "value" property I have no way of enabling the button as soon as I type something in the number input box.
Checking for null (or zero) in "inputValue" and/or for true in "invalid" yields the same result.
I also noticed that when using the component clear button "inputValue" goes to null for a couple of milliseconds and then goes to zero.
Can you guys fix that?
Is there any workaround I can use?
Please don't suggest not to use the clear button.
Yeah. You see, as "invalid" property depends on "inputValue" property, if the latter doesn't work as expected the former does not either so it wouldn't make any difference using either one or both combined with any type of logic.
Thank you for your help and passing the feedback to the team. A fix for that will be appreciated.
Will take a look at the custom component.
Any update on this? The application that I have build is used on a daily base by a bunch of end-users. All of them complained about the 'click enter', as speed is very important for our use case.
Will the numbers inputfield 'on change' be fixed to run automatically when the input changes, just like the text field does?
For us this is very important, if it cannot be fixed I have to build is custom.
If it is not there yet, is there any way that you could push it internally with your developers.
It must be an easy fix, as the text inputfield already runs properly.
Hi @ellenhelena Thanks for checking in! Yes, I'll add this additional feedback to the ticket, but it hasn't been picked up yet or added to our immediate roadmap
I'd recommend the custom option for the time being
I've read somewhere on the platform that there was a bug with custom components, where the component doesn't show when used in certain browsers, such as Safari 17. Are the custom components compatible with all browsers/versions? The app will be used on many different devices.
Another option for me would be to use a text input field instead of the numbers input field, as the text input field doesn't have this bug. Can I change the type attribute of the text input field and set it to 'number'? Probably, I cannot access that code, right?
Just in case others run into the same issue. I've created a custom component with the same model as the retool numbers inputfield component, that runs automatically.
I've made a copy of the application, in case some users experience issues with the custom component, we will move them to the version without custom component.
Here is the code for the custom numbers inputfield. It automatically triggers a query (named it 'query100') on every input change. In my case it will trigger a query that sets a filter to the table, so it all together functions as a numbers searchfield.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
</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 });
// Check if there's a value to show/hide the clear button
updateClearButtonVisibility(newValue);
// Trigger query100
window.Retool.triggerQuery('query100');
}
//Create the clear button
function createClearButton() {
const inputElement = document.querySelector('input[type="tel"]');
const hasValue = inputElement.value.trim() !== '';
// Check if the clear button already exists and if there's a value
if (!document.querySelector('button[data-clear-button]') && hasValue) {
const clearButton = document.createElement('button');
clearButton.innerText = 'x';
clearButton.style.cssText = 'background: transparent; border: none; font-size: 16px; cursor: pointer; color: #000000; margin-left: 4px;';
clearButton.onclick = clearInput;
clearButton.setAttribute('data-clear-button', true);
inputElement.parentNode.appendChild(clearButton);
}
}
// Remove the clear button when field is empty
function removeClearButton() {
const clearButton = document.querySelector('button[data-clear-button]');
if (clearButton) {
clearButton.parentNode.removeChild(clearButton);
}
}
// Clear the input value
function clearInput() {
const inputElement = document.querySelector('input[type="tel"]');
inputElement.value = '';
handleValueChange({ target: inputElement });
}
// Update clear button visibility based on the input value
function updateClearButtonVisibility(value) {
if (value !== null) {
createClearButton();
} else {
removeClearButton();
}
}
// Render the custom Numbers Inputfield component
const inputElement = document.createElement('input');
inputElement.type = 'tel';
inputElement.min = '0';
inputElement.placeholder = 'Search by room number...';
inputElement.addEventListener('input', handleValueChange);
inputElement.style.cssText = 'padding: 0; margin: 0; height: 2em; width: 300px; font-size: 16px; border: 1px solid #E2E6EB; 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>
Model is copied from the Retool numbers inputfield.
Perhaps there are better/easyer ways to do this, however I am glad that it works
I'm so glad you have something that works for now! Thank you for sharing!
To your note about compatibility & Safari 17, I haven't found any issues known internally about compatibility It should be working across browsers! If you're referring to this issue, I believe this is specific to the reload() function.
For text input, you could technically use it & have some Javascript that converts the string input to a number, but the user could still enter text & there wouldn't be any stepper buttons You'd have to have some validation telling the user to submit a number
I'd recommend exploring a custom component (or refactoring the app if you prefer)
I'm wondering if you could use some logic like this in the meantime for disabling the button:
