24
Views
5
Comments
Solved
[OutSystems Maps] OutSystems SearchPlaces does not support validation
outsystems-maps
Reactive icon
Forge asset by OutSystems

When using the SearchPlaces widget from OutSystems.
I start typing part of the address to display the dropdown.
I then select a address from the drop down and mark the input field as valid.
But the text that is displayed on the input does not show the address that was selected.
Instead it seems to lock the local variable when the OnChange is trigged when setting the field as valid.
This means that using this widget you cant make it work correctly if you want to use validation.


Type part of the address


Select a address


The text on the input is not updated to the selected address.





2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hi @Heinrich Wentzel,

After a deep analysis, we discovered that the behavior is caused by the user selecting a country and the Google API (I believe it is Maps API v3) auto-filling the input widget. This causes React to later fail a condition, where it will check if the value that is in the input widget, is the same as the value that is being assigned.

There is a workaround which is to clear the input variable, let React execute the consolidation algorithm, and then update with the “real value”. The workaround is as follows:

  1. In the OnPlaceSelect event handler, assign an empty (to dummy) text to the local variable assigned to the input widget;
  2. Create a new screen action that receives a text input and assigns it to the local variable assigned to the input widget;
  3. After the assignment, add a Javascript node and use a JS setTimeout function to call the screen action created in step 2, with the delay set to 0.
    • The idea is for React to run the consolidation algorithm, and only after assigning the input value (i.e, we are removing the auto-filled value from the Google Maps API and manually adding the user selection)

We'll open a task (ROU-11749) to investigate if there's a way to prevent this at the OutSystems Maps level, but can't promise that at this time.

Check the attached oml with the workaround implemented.

Best Regards,
GM

SearchPlacesValidation_Workaround.oml
2022-11-12 11-28-30
Gonçalo Martins
Staff

Hello @Heinrich Wentzel 

To make this more efficient and collaborative for the community please share a sample OML where that issue can be reproduced. 
That way someone from the community can take a look without investing more time in implementing the use case.

Cheers,
GM

UserImage.jpg
Heinrich Wentzel

The issue can be seen here when selecting a address in the dropdown.
https://personal-kr3hk3it.outsystemscloud.com/SearchPlacesValidation/

Attached is the OML. API key needs to be added.

SearchPlacesValidation.oml
2022-11-12 11-28-30
Gonçalo Martins
Staff

Hi @Heinrich Wentzel 

Thank you for sharing the information needed to replicate your issue.
This seems to be a conflict between the onchange event from the input platform widget and the Google Autocomplete instance since the input is only present to handle that instance.
This will require investigation since is something not only on Google Maps but also on the boundaries of the platform.

Just to complement the information for the analysis could you please explain the requirement you want to achieve, since you're not validating anything in the client action that sets the invalid state?

Cheers,
GM

UserImage.jpg
Heinrich Wentzel

Hi

The requirement  is that a address must be selected from the dropdown to be valid and whenever the input text for the address is changed it is considered no longer valid.

I got a work around by using 2 input fields and a additional local variable to keep track when a address from the dropdown is selected. Switching between the inputs based on if it is valid.

2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hi @Heinrich Wentzel,

After a deep analysis, we discovered that the behavior is caused by the user selecting a country and the Google API (I believe it is Maps API v3) auto-filling the input widget. This causes React to later fail a condition, where it will check if the value that is in the input widget, is the same as the value that is being assigned.

There is a workaround which is to clear the input variable, let React execute the consolidation algorithm, and then update with the “real value”. The workaround is as follows:

  1. In the OnPlaceSelect event handler, assign an empty (to dummy) text to the local variable assigned to the input widget;
  2. Create a new screen action that receives a text input and assigns it to the local variable assigned to the input widget;
  3. After the assignment, add a Javascript node and use a JS setTimeout function to call the screen action created in step 2, with the delay set to 0.
    • The idea is for React to run the consolidation algorithm, and only after assigning the input value (i.e, we are removing the auto-filled value from the Google Maps API and manually adding the user selection)

We'll open a task (ROU-11749) to investigate if there's a way to prevent this at the OutSystems Maps level, but can't promise that at this time.

Check the attached oml with the workaround implemented.

Best Regards,
GM

SearchPlacesValidation_Workaround.oml
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.