From 9d6bbfdc02474c2781f7ad5264dc333ba193c5a9 Mon Sep 17 00:00:00 2001 From: Frank Yan Date: Fri, 1 May 2020 13:05:01 -0700 Subject: [PATCH] Prevent placeholder from unnecessarily wrapping (#2392) Summary: In Safari, the placeholder text sometimes wraps into multiple lines before it reaches the full width of the editor. The addition of `width: 100%;` prevents the absolutely-positioned placeholder from trying to "shrink-wrap", which causes the unnecessarily wrapping. Steps to reproduce: 1. Open the editor with a placeholder that takes up >50% but <100% of the editor width in Safari. 2. Type a character. 3. Press backspace. *Before* submitting a pull request, please make sure the following is done... 1. Fork the repo and create your branch from `master`. 2. If you've added code that should be tested, add tests! 3. If you've changed APIs, update the documentation. 4. Ensure that: * The test suite passes (`npm test`) * Your code lints (`npm run lint`) and passes Flow (`npm run flow`) * You have followed the [testing guidelines](https://github.com/facebook/draft-js/wiki/Testing-for-Pull-Requests) 5. If you haven't already, complete the [CLA](https://code.facebook.com/cla). Please use the simple form below as a guideline for describing your pull request. Thanks for contributing to Draft.js! - **Summary** [...] **Test Plan** [...] Pull Request resolved: https://github.com/facebook/draft-js/pull/2392 Reviewed By: fryn Differential Revision: D21319038 Pulled By: mrkev fbshipit-source-id: b03c8afa47873ea210207aadb0225db8801bd84e --- src/component/base/DraftEditorPlaceholder.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/component/base/DraftEditorPlaceholder.css b/src/component/base/DraftEditorPlaceholder.css index b4c559ac3a..3d3428cc97 100644 --- a/src/component/base/DraftEditorPlaceholder.css +++ b/src/component/base/DraftEditorPlaceholder.css @@ -10,6 +10,7 @@ .public/DraftEditorPlaceholder/root { color: var(fig-secondary-text); position: absolute; + width: 100%; z-index: 1; }