Skip to content

Commit

Permalink
Fix trimming a text input for Material
Browse files Browse the repository at this point in the history
  • Loading branch information
@eneufeld
Daniel Kutasi authored and eneufeld committed Feb 19, 2018
1 parent d5cabdf commit 1c8c154
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 47 deletions.
6 changes: 4 additions & 2 deletions packages/material/src/fields/MaterialTextField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,9 @@ export const MaterialTextField = (props: FieldProps) => {
} else {
inputProps = {};
}
const trim = config.trim;
if (config.trim && maxLength !== undefined) {
inputProps.size = maxLength;
}
const onChange = ev => handleChange(path, ev.target.value);

return (
Expand All @@ -44,7 +46,7 @@ export const MaterialTextField = (props: FieldProps) => {
disabled={!enabled}
autoFocus={uischema.options && uischema.options.focus}
multiline={uischema.options && uischema.options.multi}
fullWidth={!trim || maxLength === undefined}
fullWidth={!config.trim || maxLength === undefined}
inputProps={inputProps}
error={!isValid}
/>
Expand Down
81 changes: 36 additions & 45 deletions packages/material/test/renderers/MaterialTextField.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { Provider } from 'react-redux';
import * as TestUtils from 'react-dom/test-utils';

const DEFAULT_MAX_LENGTH = 524288;
const defaultSize = 20;

test.beforeEach(t => {
t.context.data = { 'name': 'Foo' };
Expand Down Expand Up @@ -327,17 +328,16 @@ test('enabled by default', t => {
test('use maxLength for attributes size and maxlength', t => {
const uischema = {
type: 'Control',
scope: '#/properties/name'
};
const config = {
restrict: true,
trim: true
scope: '#/properties/name',
options: {
trim: true,
restrict: true
}
};
const store = initJsonFormsStore({
data: t.context.data,
schema: t.context.maxLengthSchema,
uischema,
config
uischema
});
const tree = TestUtils.renderIntoDocument(
<Provider store={store}>
Expand All @@ -347,22 +347,19 @@ test('use maxLength for attributes size and maxlength', t => {
const input = TestUtils.findRenderedDOMComponentWithTag(tree, 'input') as HTMLInputElement;
t.is(input.maxLength, 5);
t.not(window.getComputedStyle(input.parentElement, null).getPropertyValue('width'), '100%');
t.is(input.size, 5);
});

test('use maxLength for attribute size only', t => {
const uischema = {
type: 'Control',
scope: '#/properties/name'
};
const config = {
restrict: false,
trim: true
scope: '#/properties/name',
options: { trim: true }
};
const store = initJsonFormsStore({
data: t.context.data,
schema: t.context.maxLengthSchema,
uischema,
config
uischema
});
const tree = TestUtils.renderIntoDocument(
<Provider store={store}>
Expand All @@ -372,22 +369,19 @@ test('use maxLength for attribute size only', t => {
const input = TestUtils.findRenderedDOMComponentWithTag(tree, 'input') as HTMLInputElement;
t.is(input.maxLength, DEFAULT_MAX_LENGTH);
t.not(window.getComputedStyle(input.parentElement, null).getPropertyValue('width'), '100%');
t.is(input.size, 5);
});

test('use maxLength for attribute maxlength only', t => {
const uischema = {
type: 'Control',
scope: '#/properties/name'
};
const config = {
restrict: true,
trim: false
scope: '#/properties/name',
options: { restrict: true }
};
const store = initJsonFormsStore({
data: t.context.data,
schema: t.context.maxLengthSchema,
uischema,
config
uischema
});
const tree = TestUtils.renderIntoDocument(
<Provider store={store}>
Expand All @@ -397,38 +391,39 @@ test('use maxLength for attribute maxlength only', t => {
const input = TestUtils.findRenderedDOMComponentWithTag(tree, 'input') as HTMLInputElement;
t.is(input.maxLength, 5);
t.is(window.getComputedStyle(input.parentElement, null).getPropertyValue('width'), '100%');
t.is(input.size, defaultSize);
});

test('do not use maxLength by default', t => {
const store = initJsonFormsStore({
data: t.context.data,
schema: t.context.maxLengthSchema,
uischema: t.context.uischema,
uischema: t.context.uischema
});
const tree = TestUtils.renderIntoDocument(
<Provider store={store}>
<TextField schema={t.context.maxLengthSchema} uischema={t.context.uischema}/>
<TextField schema={t.context.schema} uischema={t.context.uischema}/>
</Provider>
);
const input = TestUtils.findRenderedDOMComponentWithTag(tree, 'input') as HTMLInputElement;
t.is(input.maxLength, 524288);
t.is(input.maxLength, DEFAULT_MAX_LENGTH);
t.is(window.getComputedStyle(input.parentElement, null).getPropertyValue('width'), '100%');
t.is(input.size, defaultSize);
});

test('maxLength not specified, attributes should have default values (trim && restrict)', t => {
const uischema = {
type: 'Control',
scope: '#/properties/name'
};
const config = {
restrict: true,
trim: true
scope: '#/properties/name',
options: {
trim: true,
restrict: true
}
};
const store = initJsonFormsStore({
data: t.context.data,
schema: t.context.schema,
uischema,
config
uischema
});
const tree = TestUtils.renderIntoDocument(
<Provider store={store}>
Expand All @@ -438,22 +433,19 @@ test('maxLength not specified, attributes should have default values (trim && re
const input = TestUtils.findRenderedDOMComponentWithTag(tree, 'input') as HTMLInputElement;
t.is(input.maxLength, DEFAULT_MAX_LENGTH);
t.is(window.getComputedStyle(input.parentElement, null).getPropertyValue('width'), '100%');
t.is(input.size, defaultSize);
});

test('maxLength not specified, attributes should have default values (trim)', t => {
const uischema = {
type: 'Control',
scope: '#/properties/name'
};
const config = {
restrict: false,
trim: true
scope: '#/properties/name',
options: { trim: true }
};
const store = initJsonFormsStore({
data: t.context.data,
schema: t.context.schema,
uischema,
config
uischema
});
const tree = TestUtils.renderIntoDocument(
<Provider store={store}>
Expand All @@ -463,22 +455,19 @@ test('maxLength not specified, attributes should have default values (trim)', t
const input = TestUtils.findRenderedDOMComponentWithTag(tree, 'input') as HTMLInputElement;
t.is(input.maxLength, DEFAULT_MAX_LENGTH);
t.is(window.getComputedStyle(input.parentElement, null).getPropertyValue('width'), '100%');
t.is(input.size, defaultSize);
});

test('maxLength not specified, attributes should have default values (restrict)', t => {
const uischema = {
type: 'Control',
scope: '#/properties/name'
};
const config = {
restrict: true,
trim: false
scope: '#/properties/name',
options: { restrict: true }
};
const store = initJsonFormsStore({
data: t.context.data,
schema: t.context.schema,
uischema,
config
uischema
});
const tree = TestUtils.renderIntoDocument(
<Provider store={store}>
Expand All @@ -488,6 +477,7 @@ test('maxLength not specified, attributes should have default values (restrict)'
const input = TestUtils.findRenderedDOMComponentWithTag(tree, 'input') as HTMLInputElement;
t.is(input.maxLength, DEFAULT_MAX_LENGTH);
t.is(window.getComputedStyle(input.parentElement, null).getPropertyValue('width'), '100%');
t.is(input.size, defaultSize);
});

test('if maxLength is not specified, attributes should have default values', t => {
Expand All @@ -504,4 +494,5 @@ test('if maxLength is not specified, attributes should have default values', t =
const input = TestUtils.findRenderedDOMComponentWithTag(tree, 'input') as HTMLInputElement;
t.is(input.maxLength, DEFAULT_MAX_LENGTH);
t.is(window.getComputedStyle(input.parentElement, null).getPropertyValue('width'), '100%');
t.is(input.size, defaultSize);
});

0 comments on commit 1c8c154

Please sign in to comment.