ActionStyle="Search"

How-to Discussions
1

For TextInput when ActionStyle=“Search” how do I react when Search is pressed? Here is the UX I have:

<TextInput ValueChanged ="{search}" Height="40" ux:Name="search_box" PlaceholderText="search text" ActionStyle="Search" PlaceholderColor="#A9D4B0"/>
2

Hi!

Thanks for reporting, looks like this is missing from our handbook :slight_smile: Will add that right away.

You can use <TextInputActionTriggered /> to react when the Search key/return key is pressed.

Have a look at this example:

<App Theme="Basic">

    <ClientPanel>

        <StackPanel>
            <JavaScript>

                function search_pressed (argument) {
                    console.log("Search pressed");
                }

                module.exports = {
                    search_pressed:search_pressed
                };

            </JavaScript>

            <TextInput Height="40" ux:Name="search_box" PlaceholderText="search text" ActionStyle="Search" PlaceholderColor="#A9D4B0" >
                <TextInputActionTriggered>
                    <Callback Handler="{search_pressed}" />
                </TextInputActionTriggered>
            </TextInput>

        </StackPanel>

    </ClientPanel>

</App>
3

perfect. thanks.

4

You can also use ActionTriggered="{search_pressed}" directly on the <TextInput>