react-polymorph - npm Package Compare versions

Comparing version 0.5.0 to 0.5.1

CHANGELOG.md

 Changelog
 =========
 
+## 0.5.1
+
+### Fixes
+
+- Fix autocomplete input issues ([PR 21](https://github.com/input-output-hk/react-polymorph/pull/21))
+
 ## 0.5.0
@@ -5,0 +11,0 @@

lib/components/Autocomplete.js

@@ -76,9 +76,19 @@ 'use strict';
       isSuggestionsOpened: false,
-      highlightedOptionIndex: 0
+      highlightedOptionIndex: 0,
+      dropdownParams: null
     }, _this.focus = function () {
       return _this.handleAutocompleteClick();
     }, _this.openSuggestions = function () {
-      _this.setState({ isSuggestionsOpened: true, highlightedOptionIndex: 0 });
+      var root = _this._getRootSkinPart();
+      var rootElementParams = root.getBoundingClientRect();
+
+      var dropdownParams = {
+        width: rootElementParams.width,
+        positionX: rootElementParams.left,
+        positionY: rootElementParams.y + rootElementParams.height + 20
+      };
+
+      _this.setState({ isSuggestionsOpened: true, highlightedOptionIndex: 0, dropdownParams: dropdownParams });
     }, _this.closeSuggestions = function () {
-      _this.setState({ isSuggestionsOpened: false, highlightedOptionIndex: 0 });
+      _this.setState({ isSuggestionsOpened: false, highlightedOptionIndex: 0, dropdownParams: null });
     }, _this.handleAutocompleteClick = function () {
@@ -123,7 +133,7 @@ _this._getInputSkinPart().focus();
           // Move selection higlight 'up' on Arrow Up key
-          _this._handleHighlightMove('up');
+          _this._handleHighlightMove(event, 'up');
           break;
         case 40:
           // Move selection higlight 'down' on Arrow Down key
-          _this._handleHighlightMove('down');
+          _this._handleHighlightMove(event, 'down');
           break;
@@ -133,10 +143,21 @@ default:
       }
-    }, _this._handleHighlightMove = function (direction) {
+    }, _this._handleHighlightMove = function (event, direction) {
+      event.preventDefault();
+
+      var maxVisibleSuggestions = _this.props.maxVisibleSuggestions;
+      var _this$state = _this.state,
+          filteredWords = _this$state.filteredWords,
+          highlightedOptionIndex = _this$state.highlightedOptionIndex;
+
+
       var position = void 0;
       if (direction === 'up') {
-        position = _this.state.highlightedOptionIndex - 1;
+        position = highlightedOptionIndex - 1;
       } else if (direction === 'down') {
-        position = _this.state.highlightedOptionIndex + 1;
+        position = highlightedOptionIndex + 1;
       }
-      if (position >= 0 && position < _this.state.filteredWords.length) {
+
+      var maxPosition = maxVisibleSuggestions < filteredWords.length ? maxVisibleSuggestions : filteredWords.length;
+
+      if (position >= 0 && position < maxPosition) {
         _this.setState({ highlightedOptionIndex: position, isSuggestionsOpened: true });
@@ -203,3 +224,10 @@ }
     value: function componentDidMount() {
+      var node = this._getRootSkinPart();
+      var parentNode = node.parentNode;
+
       _events2.default.addEventsToDocument(this._getDocumentEvents());
+      window.addEventListener('resize', this.closeSuggestions);
+
+      // handle scroll e.g in modal - by default scroll handler is only on document
+      parentNode.addEventListener('scroll', this.closeSuggestions);
     }
@@ -209,3 +237,8 @@ }, {
     value: function componentWillUnmount() {
+      var node = this._getRootSkinPart();
+      var parentNode = node.parentNode;
+
       _events2.default.removeEventsFromDocument(this._getDocumentEvents());
+      window.removeEventListener('resize', this.closeSuggestions);
+      parentNode.removeEventListener('scroll', this.closeSuggestions);
     }
@@ -221,3 +254,4 @@ }, {
         maxSelections: this.props.maxSelections,
-        maxVisibleSuggestions: this.props.maxVisibleSuggestions
+        maxVisibleSuggestions: this.props.maxVisibleSuggestions,
+        dropdownParams: this.state.dropdownParams
       });
@@ -242,3 +276,4 @@ }
       return {
-        click: this._handleDocumentClick
+        click: this._handleDocumentClick,
+        scroll: this.closeSuggestions
       };
@@ -245,0 +280,0 @@ }

lib/skins/simple/raw/AutocompleteSkin.js

@@ -50,3 +50,3 @@ 'use strict';
     var filteredAndLimitedSuggestions = (0, _slice3.default)(props.filteredWords, 0, props.maxVisibleSuggestions);
-    var isFirstOptionHighlighted = props.highlightedOptionIndex === 0;
+    var isFirstOptionHighlighted = props.highlightedOptionIndex === 0 && filteredAndLimitedSuggestions.length;
 
@@ -117,3 +117,8 @@ var selectedWords = props.selectedWords && props.selectedWords.map(function (selectedWord, index) {
             {
-              className: (0, _classnames2.default)([props.theme.suggestionsList, props.isSuggestionsOpened ? props.theme.opened : null, isFirstOptionHighlighted ? props.theme.firstOptionHighlighted : null])
+              className: (0, _classnames2.default)([props.theme.suggestionsList, props.isSuggestionsOpened ? props.theme.opened : null, isFirstOptionHighlighted ? props.theme.firstOptionHighlighted : null]),
+              style: props.dropdownParams && {
+                top: props.dropdownParams.positionY,
+                left: props.dropdownParams.positionX,
+                width: props.dropdownParams.width
+              }
             },
@@ -120,0 +125,0 @@ props.filteredWords.length ? filteredAndLimitedSuggestions.map(function (option, index) {

package.json

 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "author": {
@@ -6,0 +6,0 @@ "name": "Dominik Guzei",

source/components/Autocomplete.js

@@ -39,10 +39,23 @@ import React from 'react';
     highlightedOptionIndex: 0,
+    dropdownParams: null,
   };
 
   componentDidMount() {
+    const node = this._getRootSkinPart();
+    const parentNode = node.parentNode;
+
     events.addEventsToDocument(this._getDocumentEvents());
+    window.addEventListener('resize', this.closeSuggestions);
+
+    // handle scroll e.g in modal - by default scroll handler is only on document
+    parentNode.addEventListener('scroll', this.closeSuggestions);
   }
 
   componentWillUnmount () {
+    const node = this._getRootSkinPart();
+    const parentNode = node.parentNode;
+
     events.removeEventsFromDocument(this._getDocumentEvents());
+    window.removeEventListener('resize', this.closeSuggestions);
+    parentNode.removeEventListener('scroll', this.closeSuggestions);
   }
@@ -58,2 +71,3 @@
       maxVisibleSuggestions: this.props.maxVisibleSuggestions,
+      dropdownParams: this.state.dropdownParams,
     });
@@ -65,7 +79,16 @@ }
   openSuggestions = () => {
-    this.setState({ isSuggestionsOpened: true, highlightedOptionIndex: 0 });
+    const root = this._getRootSkinPart();
+    const rootElementParams = root.getBoundingClientRect();
+
+    const dropdownParams = {
+      width: rootElementParams.width,
+      positionX: rootElementParams.left,
+      positionY: rootElementParams.y + rootElementParams.height + 20,
+    };
+
+    this.setState({ isSuggestionsOpened: true, highlightedOptionIndex: 0, dropdownParams });
   };
 
   closeSuggestions = () => {
-    this.setState({ isSuggestionsOpened: false, highlightedOptionIndex: 0 });
+    this.setState({ isSuggestionsOpened: false, highlightedOptionIndex: 0, dropdownParams: null });
   };
@@ -110,6 +133,6 @@
       case 38: // Move selection higlight 'up' on Arrow Up key
-        this._handleHighlightMove('up');
+        this._handleHighlightMove(event, 'up');
         break;
       case 40: // Move selection higlight 'down' on Arrow Down key
-        this._handleHighlightMove('down');
+        this._handleHighlightMove(event, 'down');
         break;
@@ -121,10 +144,18 @@ default:
 
-  _handleHighlightMove = (direction) => {
+  _handleHighlightMove = (event, direction) => {
+    event.preventDefault();
+
+    const { maxVisibleSuggestions } = this.props;
+    const { filteredWords, highlightedOptionIndex } = this.state;
+
     let position;
     if (direction === 'up') {
-      position = this.state.highlightedOptionIndex - 1;
+      position = highlightedOptionIndex - 1;
     } else if (direction === 'down') {
-      position = this.state.highlightedOptionIndex + 1;
+      position = highlightedOptionIndex + 1;
     }
-    if (position >= 0 && position < this.state.filteredWords.length) {
+
+    const maxPosition = (maxVisibleSuggestions < filteredWords.length) ? maxVisibleSuggestions : filteredWords.length;
+
+    if (position >= 0 && position < maxPosition) {
       this.setState({ highlightedOptionIndex: position, isSuggestionsOpened: true });
@@ -208,6 +239,6 @@ }
     return {
-      click: this._handleDocumentClick
+      click: this._handleDocumentClick,
+      scroll: this.closeSuggestions,
     };
   }
-
 }

source/skins/simple/raw/AutocompleteSkin.js

@@ -23,3 +23,3 @@ import React from 'react';
     const filteredAndLimitedSuggestions = _.slice(props.filteredWords, 0, props.maxVisibleSuggestions);
-    const isFirstOptionHighlighted = props.highlightedOptionIndex === 0;
+    const isFirstOptionHighlighted = props.highlightedOptionIndex === 0 && filteredAndLimitedSuggestions.length;
 
@@ -89,2 +89,7 @@ let selectedWords = props.selectedWords && props.selectedWords.map((selectedWord, index) => {
               ])}
+              style={props.dropdownParams && {
+                top: props.dropdownParams.positionY,
+                left: props.dropdownParams.positionX,
+                width: props.dropdownParams.width,
+              }}
             >
@@ -91,0 +96,0 @@ {props.filteredWords.length ? filteredAndLimitedSuggestions.map((option, index) => {

No alert changes

Improved metrics

Total package byte prevSize

851043

increased by0.73%

Lines of code

3155

increased by1.87%

No dependency changes