diff --git a/common/changes/office-ui-fabric-react/magellan-enableTextfieldScroll_2018-03-14-22-27.json b/common/changes/office-ui-fabric-react/magellan-enableTextfieldScroll_2018-03-14-22-27.json new file mode 100644 index 0000000000000..594bfc13201cc --- /dev/null +++ b/common/changes/office-ui-fabric-react/magellan-enableTextfieldScroll_2018-03-14-22-27.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "TextField: Enabled scrolling and resize when disabled", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "law@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.scss b/packages/office-ui-fabric-react/src/components/TextField/TextField.scss index e605924784b16..8a940db798450 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/TextField.scss +++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.scss @@ -77,8 +77,6 @@ $field-error-color: $errorTextColor; .rootIsDisabled & { background-color: $field-background-disabled-color; border-color: $field-border-disabled-color; - pointer-events: none; - cursor: default; } &:hover, @@ -104,8 +102,6 @@ $field-error-color: $errorTextColor; :global(.field) { background-color: $field-background-disabled-color; border-color: $field-border-disabled-color; - pointer-events: none; - cursor: default; } } @@ -148,8 +144,6 @@ $field-error-color: $errorTextColor; &[disabled] { background-color: transparent; border-color: transparent; - pointer-events: none; - cursor: default; } .field { diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Multiline.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Multiline.Example.tsx index b15fe8d8929ee..480dabd284aa0 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Multiline.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Multiline.Example.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { TextField } from 'office-ui-fabric-react/lib/TextField'; import './TextField.Examples.scss'; +import { lorem } from '@uifabric/example-app-base'; export class TextFieldMultilineExample extends React.Component { public render() { @@ -16,6 +17,7 @@ export class TextFieldMultilineExample extends React.Component { multiline rows={ 4 } disabled={ true } + value={ lorem(100) } />