auto-select-input
Reactive icon

Auto-Select Input

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded
 on 22 Oct (23 hours ago)
 by 
0.0
 (0 ratings)
auto-select-input

Auto-Select Input

Documentation
1.0.0

The Auto-Select Input component is a quality-of-life UI wrapper designed to mimic the best behavior of desktop applications where text fields automatically select their content on focus. This component eliminates the tedious and error-prone process of manually selecting text before typing to overwrite the existing value.

By simply wrapping any standard OutSystems Input widget, this component activates a small piece of client-side JavaScript (using the native select() method) that triggers the full text selection whenever the input receives focus (via mouse click or keyboard tabbing).

Key Features & Benefits:

  • Instant Text Selection
  • Enhanced Productivity
  • Simple Implementation
  • Browser Agnostic
  • Clean Architecture


How to Use:

The component is extremely easy to implement and integrate into any Reactive Web or Mobile application:

  • Install the Auto-Select Input component from the Forge.
  • On your screen, drag the AutoSelectInput Web Block to the desired location.
  • Inside the AutoSelectInput's Placeholder, drag and drop any standard OutSystems Input widget (e.g., Text or Number type).
  • Crucial Step: Select the Input widget you just placed and give it a unique Name (e.g., MyQuantityInput).
  • In the AutoSelectInput block's properties, set the InputWidgetId parameter to the unique ID of the input widget you just named (e.g., MyQuantityInput.Id).

That's it! When the screen loads, the wrapper initializes the client-side logic. The next time a user clicks the input, the text will be automatically selected.