Highlight Control on Focus in React

Background:

By default, Wijmo Input controls do not get highlighted when they come into focus. We can change this by adding some CSS to the control's class.

Steps to Complete:

1. Add a class to the control

2. Assign border style to the CSS class on focus-within

Getting Started

Add a class to the control

First, you'll need to add a class to the control so that we can append CSS to it when it goes into focus

<wjInput.AutoComplete className="autocmplt" itemsSource={this.state.countries}></wjInput.AutoComplete>

Assign border style to the CSS class on focus-within

Next, CSS will need to be added to place a border around the control when it gains focus.

.autocmplt:focus-within {
    border: 1px solid blue;
}

Focus-within is used because the textbox that you can enter information into is another element within the actual control. Focus-within will apply the CSS when an element within the class receives focus.

You can find a live sample of this project at this location: https://stackblitz.com/edit/wijmo-knowledgebase-react-input-highlight-focus