diff --git a/public/app/core/components/Form/Input.test.tsx b/public/app/core/components/Form/Input.test.tsx
new file mode 100644
index 00000000000..9e903208e80
--- /dev/null
+++ b/public/app/core/components/Form/Input.test.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
+import { Input, EventsWithValidation } from './Input';
+import { ValidationEvents } from 'app/types';
+
+const TEST_ERROR_MESSAGE = 'Value must be empty or less than 3 chars';
+const testBlurValidation: ValidationEvents = {
+ [EventsWithValidation.onBlur]: [
+ {
+ rule: (value: string) => {
+ if (!value || value.length < 3) {
+ return true;
+ }
+ return false;
+ },
+ errorMessage: TEST_ERROR_MESSAGE,
+ },
+ ],
+};
+
+describe('Input', () => {
+ it('renders correctly', () => {
+ const tree = renderer.create().toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('should validate with error onBlur', () => {
+ const wrapper = shallow();
+ const evt = {
+ persist: jest.fn,
+ target: {
+ value: 'I can not be more than 2 chars',
+ },
+ };
+
+ wrapper.find('input').simulate('blur', evt);
+ expect(wrapper.state('error')).toBe(TEST_ERROR_MESSAGE);
+ });
+
+ it('should validate without error onBlur', () => {
+ const wrapper = shallow();
+ const evt = {
+ persist: jest.fn,
+ target: {
+ value: 'Hi',
+ },
+ };
+
+ wrapper.find('input').simulate('blur', evt);
+ expect(wrapper.state('error')).toBe(null);
+ });
+});
diff --git a/public/app/core/components/Form/Input.tsx b/public/app/core/components/Form/Input.tsx
index e815336edbe..6ba58b45e91 100644
--- a/public/app/core/components/Form/Input.tsx
+++ b/public/app/core/components/Form/Input.tsx
@@ -45,7 +45,7 @@ export class Input extends PureComponent {
validatorAsync = (validationRules: ValidationRule[]) => {
return evt => {
- const errors = validate(evt.currentTarget.value, validationRules);
+ const errors = validate(evt.target.value, validationRules);
this.setState(prevState => {
return {
...prevState,
@@ -60,6 +60,7 @@ export class Input extends PureComponent {
Object.keys(EventsWithValidation).forEach((eventName: EventsWithValidation) => {
if (hasValidationEvent(eventName, validationEvents) || restProps[eventName]) {
inputElementProps[eventName] = async evt => {
+ evt.persist(); // Needed for async. https://reactjs.org/docs/events.html#event-pooling
if (hasValidationEvent(eventName, validationEvents)) {
await this.validatorAsync(validationEvents[eventName]).apply(this, [evt]);
}
diff --git a/public/app/core/components/Form/__snapshots__/Input.test.tsx.snap b/public/app/core/components/Form/__snapshots__/Input.test.tsx.snap
new file mode 100644
index 00000000000..249d6b0be8d
--- /dev/null
+++ b/public/app/core/components/Form/__snapshots__/Input.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input renders correctly 1`] = `
+
+
+
+`;