Skip to content

Commit f30dab7

Browse files
jukbenjukben
authored
Autocomplete auto-position (#111)
Close #37 Ability to pass `boundariesElement` (defaults `body`) to act as boundaries. (red line) Added new classes as well - `.rta__autocomplete--left` - `.rta__autocomplete--right` - `.rta__autocomplete--top` - `.rta__autocomplete--bottom` ![auto-position](https://user-images.githubusercontent.com/8135252/50249536-96415d80-03de-11e9-9c0d-31cdffbb7dde.gif)
1 parent 6b729f6 commit f30dab7

File tree

12 files changed

+438
-225
lines changed

12 files changed

+438
-225
lines changed

‎README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,12 @@ Enhanced textarea to achieve autocomplete functionality.
1919

2020
This package provides React Component to achieve GitHub's like functionality in comments regarding the textarea autocomplete. It can be used for example for emoji autocomplete or for @mentions. The render function (for displaying text enhanced by this textarea) is beyond the scope of this package and it should be solved separately.
2121

22+
## Browsers support
23+
24+
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>iOS Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png" alt="Samsung" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Samsung | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
25+
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
26+
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
27+
2228
## Installation
2329

2430
This module is distributed via [npm][npm] and should be installed as one of your project's `dependencies`:
@@ -46,6 +52,7 @@ or there is UMD build available. [Check out this pen as example](https://codepen
4652
| onCaretPositionChange | Function: (number) => void | Listener called every time the textarea's caret position is changed. The listener is called with one attribute - caret position denoted by an integer number. |
4753
| closeOnClickOutside | boolean | When it's true autocomplete will close when use click outside. Defaults to false. |
4854
| movePopupAsYouType | boolean | When it's true the textarea will move along with a caret as a user continues to type. Defaults to false. |
55+
| boundariesElement | string \| HTMLElement | Element which should prevent autocomplete to overflow. Defaults to _body_. |
4956
| style | Style Object | Style's of textarea |
5057
| listStyle | Style Object | Styles of list's wrapper |
5158
| itemStyle | Style Object | Styles of item's wrapper |

‎__tests__/__snapshots__/index.spec.js.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ exports[`object-based items match the snapshot 1`] = `
2929

3030
exports[`object-based items match the snapshot of dropdown, list, and item 1`] = `
3131
<div
32-
class="rta__autocomplete "
33-
style="top: 0px;"
32+
class="rta__autocomplete rta__autocomplete--left rta__autocomplete--top "
33+
style="top: 0px; left: 0px;"
3434
>
3535
<ul
3636
class="rta__list my-rta-list"
@@ -158,8 +158,8 @@ exports[`object-based items with keys match the snapshot 1`] = `
158158

159159
exports[`object-based items with keys match the snapshot of dropdown, list, and item 1`] = `
160160
<div
161-
class="rta__autocomplete "
162-
style="top: 0px;"
161+
class="rta__autocomplete rta__autocomplete--left rta__autocomplete--top "
162+
style="top: 0px; left: 0px;"
163163
>
164164
<ul
165165
class="rta__list my-rta-list"

0 commit comments

Comments
 (0)