WebdriverIO custom command to input value in fields those need to be focused first

gistfile1.txt

/**
* From David Ridgley
* https://github.com/Arximiro
*/

// Define a custom command
browser.addCommand('fillInput', function (el, val) {
            browser.waitUntil(function () {
                el.click();
                return el.isFocused();
            }, 5000, 'Input Timed Out', 200)
            el.setValue(val);
        });

// Usage example
browser.fillInput(this.nameField, formData.name);
browser.fillInput(this.descriptionField, formData.description);
browser.fillInput(this.maxUsesField, formData.max_uses);
browser.fillInput(this.targetField, formData.target);

Turns out this still doesn't fix the problem of inputs sometimes getting filled too quickly and causing text to get cut off or end up in the wrong input. I changed it to this for now. Will update if I find a better way.

		browser.addCommand('fillInput', function (el, val) {
			browser.pause(150);
			el.setValue(val);
			browser.pause(150);
		});

edit: The above gist should still work if your issue is just that you need an input to be focused before using setValue for whatever reason. My issue was inputs getting filled too quickly and sometimes some text would end up in the next input.