haya-select 1.0.48 → 1.0.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haya-select",
-  "version": "1.0.48",
+  "version": "1.0.50",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -10,6 +10,7 @@
   "license": "ISC",
   "dependencies": {
     "classnames": "^2.3.1",
+    "conjointment": "^0.1.1",
     "debounce": "^2.1.0",
     "diggerize": "^1.0.4",
     "fetching-object": "^1.0.1",

package/src/select/index.jsx

@@ -9,7 +9,7 @@ import OptionGroup from "./option-group"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import RenderHtml from "react-native-render-html"
-import {Portal} from "react-native-portalize"
+import {Portal} from "conjointment"
 import {memo, useEffect, useRef} from "react"
 import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
 import {Platform, Pressable, Text, TextInput, View} from "react-native"
@@ -573,7 +573,7 @@ export default memo(shapeComponent(class HayaSelect extends ShapeComponent {
     const {optionsContainerRef} = this.tt
     const {optionsAbsolute} = this.p
     const {selectContainerLayout, loadedOptions, endOfSelectLayout, optionsContainerLayout, optionsPlacement, optionsVisibility} = this.s
-    let top
+    let left, top
 
     const style = this.stylingFor("optionsContainer", {
       position: "absolute",
@@ -593,22 +593,30 @@ export default memo(shapeComponent(class HayaSelect extends ShapeComponent {
     } else if (optionsPlacement == "below") {
       if (Platform.OS == "web") {
         // onLayout top value is sometimes negative so use browser JS to get it instead
-        top = digg(this.tt.endOfSelectRef.current.getBoundingClientRect(), "top")
+        top = digg(this.tt.endOfSelectRef.current.getBoundingClientRect(), "top") + document.documentElement.scrollTop + 2
+
+        // onLayout left values doesn't always update when changed
+        left = digg(this.tt.endOfSelectRef.current.getBoundingClientRect(), "left") + document.documentElement.scrollLeft + 2
       } else {
+        left = this.s.endOfSelectLayout.left
         top = selectContainerLayout.top
       }
 
-      style.left = this.s.endOfSelectLayout.left
+      style.left = left
       style.top = top - 2
     } else if (optionsPlacement == "above") {
       if (Platform.OS == "web") {
         // onLayout top value is sometimes negative so use browser JS to get it instead
-        top = digg(this.tt.selectContainerRef.current.getBoundingClientRect(), "top")
+        top = digg(this.tt.selectContainerRef.current.getBoundingClientRect(), "top") + document.documentElement.scrollTop - 1
+
+        // onLayout left values doesn't always update when changed
+        left = digg(this.tt.selectContainerRef.current.getBoundingClientRect(), "left") + document.documentElement.scrollLeft - 1
       } else {
+        left = endOfSelectLayout.left
         top = selectContainerLayout.top
       }
 
-      style.left = endOfSelectLayout.left
+      style.left = left
       style.top = top - optionsContainerLayout.height + 1
     } else {
       throw new Error(`Unkonwn options placement: ${optionsPlacement}`)