Fix MoneyInput and convert field tests

[dferber90]

Features

• Adds support for onFocus to MoneyInput and MoneyField

Fixes

• Fixes onBlur being called properly in MoneyInput. This was a regression somewhere after Redo MoneyInput (better UX, less error cases) #175

Tests

• converts tests of LocalizedTextField & LocalizedMultilineTextField & MoneyField

[montezume]

Hm, did you look into overriding the <Control> from react-select to have a label pointing at the input? I think this would be much simpler than creating another ref.

[dferber90]

Sorry, I don't get what you're trying to say 😕 Maybe there's confusion to what this is solving? This PR is not about #330. The description of this PR was pretty sparse, so let me make up for it now 👼

This PR fixes the MoneyInput by making sure that onBlur gets called (it wasn't called before). This is what the broken version looks like. Notice that touched is never set for either the currency or the amount input:

This also meant that errors would never be displayed as we check the touched-state before showing them.

Here is the fixed version where onBlur gets called:

You'll notice that onBlur only gets called when the input loses focus for an element which is not part of the MoneyInput. onBlur does not get called when the amount dropdown loses focus because the currency dropdown gains focus (and vice versa).

Further, onBlur gets called for amount and currencyCode when either of them loose focus. This is on purpose as it simplifies the logic a ton.

Why we need the container ref

As we want to check whether focus was lost for a field outside or inside of MoneyInput we need to check whether the newly focused element is inside of MoneyInput. We can do so by reading event.relatedTarget from the blur event. event.relatedTarget points at the newly focused element. We can then see whether the container contains that element by doing this.containerRef.current.contains(event.relatedTarget). That's what we need the additional reference for.

Why we need the amount ref

After the user selected a currency they're likely to want to enter an amount next. So we programmatically focus the amount input after the user made a selection using this.amountInputRef.current.focus().

Why we need separate touched states

Maybe ideally (not actually sure if it would be better) we'd have one touched-state only for the whole MoneyInput but that doesn't work well with Formik as it automatically creates a touched-state based on the values when submitted. That means the created touched state would be different (touched: { price: { amount: true, currencyCode: true } }) from the one we'd maintain ourselves (touched: { price: true }). This breaks all consumers as they'd need to deal with both variations. That's why we use separate touched-states for both of them and always ensure both are set.

[dferber90]

Let's follow up with the label suggestion in case I misunderstood what you were saying.