@mpxjs/webpack-plugin 2.10.4 → 2.10.5-beta.1

package/lib/runtime/components/react/mpx-canvas/index.tsx

@@ -9,7 +9,7 @@
  * ✔ bindlongtap
  * ✔ binderror
  */
-import React, { createElement, useRef, useState, useCallback, useEffect, forwardRef, JSX, TouchEvent, MutableRefObject } from 'react'
+import { createElement, useRef, useState, useCallback, useEffect, forwardRef, JSX, TouchEvent, MutableRefObject } from 'react'
 import { View, Platform, StyleSheet, NativeSyntheticEvent } from 'react-native'
 import { WebView } from 'react-native-webview'
 import useNodesRef, { HandlerRef } from '../useNodesRef'
@@ -31,6 +31,7 @@ import './CanvasGradient'
 import { createImage as canvasCreateImage } from './Image'
 import { createImageData as canvasCreateImageData } from './ImageData'
 import { useConstructorsRegistry } from './constructorsRegistry'
+import Portal from '../mpx-portal'
 
 const stylesheet = StyleSheet.create({
   container: { overflow: 'hidden', flex: 0 },
@@ -48,19 +49,19 @@ const stylesheet = StyleSheet.create({
 })
 
 interface CanvasProps {
-  style?: Record<string, any>;
-  originWhitelist?: Array<string>;
+  style?: Record<string, any>
+  originWhitelist?: Array<string>
   'enable-var'?: boolean
   'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
   'external-var-context'?: Record<string, any>
-  bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  bindtouchend?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  bindtouchcancel?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  bindlongtap?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  binderror?: (event: NativeSyntheticEvent<ErrorEvent>) => void;
+  bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent>) => void
+  bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void
+  bindtouchend?: (event: NativeSyntheticEvent<TouchEvent>) => void
+  bindtouchcancel?: (event: NativeSyntheticEvent<TouchEvent>) => void
+  bindlongtap?: (event: NativeSyntheticEvent<TouchEvent>) => void
+  binderror?: (event: NativeSyntheticEvent<ErrorEvent>) => void
 }
 
 const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasProps>((props: CanvasProps = {}, ref): JSX.Element => {
@@ -71,6 +72,7 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
   const {
     normalStyle,
     hasSelfPercent,
+    hasPositionFixed,
     setWidth,
     setHeight
   } = useTransformStyle(extendObject({}, style, stylesheet.container), {
@@ -91,13 +93,21 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
   const { register } = useConstructorsRegistry()
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
-  const innerProps = useInnerProps(props, {
-    ref: nodeRef,
-    style: extendObject({}, normalStyle, layoutStyle, { opacity: isLoaded ? 1 : 0 }),
-    ...layoutProps
-  }, [], {
-    layoutRef
-  })
+  const innerProps = useInnerProps(
+    extendObject(
+      {},
+      props,
+      layoutProps,
+      {
+        ref: nodeRef,
+        style: extendObject({}, normalStyle, layoutStyle, { opacity: isLoaded ? 1 : 0 })
+      }
+    ),
+    [],
+    {
+      layoutRef
+    }
+  )
 
   const context2D = new CanvasRenderingContext2D(canvasRef.current) as any
 
@@ -158,10 +168,7 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
 
   const postMessage = useCallback(async (message: WebviewMessage) => {
     if (!canvasRef.current?.bus) return
-    const { type, payload } = await canvasRef.current.bus.post({
-      id: ID(),
-      ...message
-    })
+    const { type, payload } = await canvasRef.current.bus.post(extendObject({ id: ID() }, message))
 
     switch (type) {
       case 'error': {
@@ -196,7 +203,7 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
   }
 
   const onMessage = useCallback((e: { nativeEvent: { data: string } }) => {
-    let data = JSON.parse(e.nativeEvent.data)
+    const data = JSON.parse(e.nativeEvent.data)
     switch (data.type) {
       case 'error': {
         const { binderror } = props
@@ -212,27 +219,27 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
         break
       }
       default: {
+        const newData: { payload?: unknown } = {}
+        // createLinearGradient 方法调用需要在 constructors 中需要注册 CanvasGradient
+        const constructor = constructors[data.meta.constructor]
         if (data.payload) {
-          // createLinearGradient 方法调用需要在 constructors 中需要注册 CanvasGradient
-          const constructor = constructors[data.meta.constructor]
           if (constructor) {
             const { args, payload } = data
             // RN 端同步生成一个 CanvasGradient 的实例
             const object = constructor.constructLocally(canvasRef.current, ...args)
-            Object.assign(object, payload, {
+            extendObject(object, payload, {
               [WEBVIEW_TARGET]: data.meta.target
             })
-            data = {
-              ...data,
+            extendObject(newData, data, {
               payload: object
-            }
+            })
           }
           for (const listener of canvasRef.current.listeners) {
-            listener(data.payload)
+            listener(constructor ? newData.payload : data.payload)
           }
         }
         if (canvasRef.current.bus) {
-          canvasRef.current.bus.handle(data)
+          canvasRef.current.bus.handle(constructor && data.payload ? newData : data)
         }
       }
     }
@@ -251,9 +258,11 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
     context: context2D
   })
 
-  if (__mpx_mode__ !== 'ios') {
+  let canvasComponent
+
+  if (__mpx_mode__ === 'android') {
     const isAndroid9 = Platform.Version as number >= 28
-    return createElement(View, innerProps, createElement(
+    canvasComponent = createElement(View, innerProps, createElement(
       WebView,
       {
         ref: (element) => {
@@ -280,7 +289,7 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
     )
   }
 
-  return createElement(View, innerProps, createElement(WebView, {
+  canvasComponent = createElement(View, innerProps, createElement(WebView, {
     ref: (element) => {
       if (canvasRef.current) {
         canvasRef.current.webview = element
@@ -293,6 +302,12 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
     onLoad: onLoad,
     scrollEnabled: false
   }))
+
+  if (hasPositionFixed) {
+    canvasComponent = createElement(Portal, null, canvasComponent)
+  }
+
+  return canvasComponent
 })
 
 _Canvas.displayName = 'mpxCanvas'

package/lib/runtime/components/react/mpx-checkbox-group.tsx

@@ -21,6 +21,7 @@ import { FormContext, FormFieldValue, CheckboxGroupContext, GroupValue } from '.
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
+import Portal from './mpx-portal'
 
 export interface CheckboxGroupProps {
   name: string
@@ -68,6 +69,7 @@ const CheckboxGroup = forwardRef<
   const styleObj = extendObject({}, defaultStyle, style)
 
   const {
+    hasPositionFixed,
     hasSelfPercent,
     normalStyle,
     hasVarDec,
@@ -116,13 +118,14 @@ const CheckboxGroup = forwardRef<
   }, [])
 
   const innerProps = useInnerProps(
-    props,
     extendObject(
+      {},
+      props,
+      layoutProps,
       {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle)
-      },
-      layoutProps
+      }
     ),
     [
       'name'
@@ -158,7 +161,7 @@ const CheckboxGroup = forwardRef<
     }
   }, [])
 
-  return createElement(
+  const finalComponent = createElement(
     View,
     innerProps,
     createElement(
@@ -173,6 +176,12 @@ const CheckboxGroup = forwardRef<
       )
     )
   )
+
+  if (hasPositionFixed) {
+    return createElement(Portal, null, finalComponent)
+  }
+
+  return finalComponent
 })
 
 CheckboxGroup.displayName = 'MpxCheckboxGroup'

package/lib/runtime/components/react/mpx-checkbox.tsx

@@ -28,6 +28,7 @@ import useNodesRef, { HandlerRef } from './useNodesRef'
 import Icon from './mpx-icon'
 import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
 import { CheckboxGroupContext, LabelContext } from './context'
+import Portal from './mpx-portal'
 
 interface Selection {
   value?: string
@@ -42,9 +43,9 @@ export interface CheckboxProps extends Selection {
   'enable-offset'?: boolean
   'enable-var'?: boolean
   'external-var-context'?: Record<string, any>
-  'parent-font-size'?: number;
-  'parent-width'?: number;
-  'parent-height'?: number;
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
   children?: ReactNode
   bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
   _onChange?: (evt: NativeSyntheticEvent<TouchEvent> | unknown, { checked }: { checked: boolean }) => void
@@ -99,7 +100,7 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
     const [isChecked, setIsChecked] = useState<boolean>(!!checked)
 
     const groupContext = useContext(CheckboxGroupContext)
-    let groupValue: { [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>>; } } | undefined
+    let groupValue: { [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>> } } | undefined
     let notifyChange: (evt: NativeSyntheticEvent<TouchEvent>) => void | undefined
 
     const defaultStyle = extendObject(
@@ -128,6 +129,7 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
     }
 
     const {
+      hasPositionFixed,
       hasSelfPercent,
       normalStyle,
       hasVarDec,
@@ -163,14 +165,13 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
     }
 
     const innerProps = useInnerProps(
-      props,
       extendObject(
-        {
-          ref: nodeRef,
-          style: extendObject({}, innerStyle, layoutStyle)
-        },
+        {},
+        props,
         layoutProps,
         {
+          ref: nodeRef,
+          style: extendObject({}, innerStyle, layoutStyle),
           bindtap: !disabled && onTap
         }
       ),
@@ -207,7 +208,7 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
       }
     }, [checked])
 
-    return createElement(View, innerProps,
+    const finalComponent = createElement(View, innerProps,
       createElement(
         View,
         { style: defaultStyle },
@@ -228,6 +229,12 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
         }
       )
     )
+
+    if (hasPositionFixed) {
+      return createElement(Portal, null, finalComponent)
+    }
+
+    return finalComponent
   }
 )
 

package/lib/runtime/components/react/mpx-form.tsx

@@ -11,20 +11,20 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import { FormContext } from './context'
 import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren, extendObject } from './utils'
 interface FormProps {
-  style?: Record<string, any>;
-  children?: ReactNode;
-  'enable-offset'?: boolean;
+  style?: Record<string, any>
+  children?: ReactNode
+  'enable-offset'?: boolean
   'enable-var'?: boolean
-  'external-var-context'?: Record<string, any>;
-  'parent-font-size'?: number;
-  'parent-width'?: number;
-  'parent-height'?: number;
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
   bindsubmit?: (evt: {
     detail: {
-      value: any;
-    };
-  }) => void;
-  bindreset?: () => void;
+      value: any
+    }
+  }) => void
+  bindreset?: () => void
 }
 
 const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: FormProps, ref): JSX.Element => {
@@ -59,14 +59,20 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef })
 
-  const innerProps = useInnerProps(props, extendObject({
-    style: extendObject({}, innerStyle, layoutStyle),
-    ref: formRef
-  }, layoutProps)
-  , [
-    'bindsubmit',
-    'bindreset'
-  ], { layoutRef })
+  const innerProps = useInnerProps(
+    extendObject(
+      {},
+      props,
+      layoutProps,
+      {
+        style: extendObject({}, innerStyle, layoutStyle),
+        ref: formRef
+      }
+    )
+    , [
+      'bindsubmit',
+      'bindreset'
+    ], { layoutRef })
 
   const contextValue = useMemo(() => {
     const formValuesMap = new Map()

package/lib/runtime/components/react/mpx-icon/index.tsx

@@ -17,6 +17,7 @@ import Cancel from './icons/cancel.png'
 import Download from './icons/download.png'
 import Search from './icons/search.png'
 import Clear from './icons/clear.png'
+import Portal from '../mpx-portal'
 
 export type IconType =
   | 'success'
@@ -75,6 +76,7 @@ const Icon = forwardRef<HandlerRef<Text, IconProps>, IconProps>(
     const styleObj = extendObject({}, defaultStyle, style)
 
     const {
+      hasPositionFixed,
       hasSelfPercent,
       normalStyle,
       setWidth,
@@ -87,14 +89,15 @@ const Icon = forwardRef<HandlerRef<Text, IconProps>, IconProps>(
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
     const innerProps = useInnerProps(
-      props,
       extendObject(
+        {},
+        props,
+        layoutProps,
         {
           ref: nodeRef,
           source,
           style: extendObject({}, normalStyle, layoutStyle, { tintColor: color })
-        },
-        layoutProps
+        }
       ),
       [],
       {
@@ -102,7 +105,13 @@ const Icon = forwardRef<HandlerRef<Text, IconProps>, IconProps>(
       }
     )
 
-    return createElement(Image, innerProps)
+    const finalComponent = createElement(Image, innerProps)
+
+    if (hasPositionFixed) {
+      return createElement(Portal, null, finalComponent)
+    }
+
+    return finalComponent
   }
 )
 

package/lib/runtime/components/react/mpx-image.tsx

@@ -27,6 +27,7 @@ import { SvgCssUri } from 'react-native-svg/css'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject } from './utils'
+import Portal from './mpx-portal'
 
 export type Mode =
   | 'scaleToFill'
@@ -159,7 +160,13 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     }
   }
 
-  const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+  const {
+    hasPositionFixed,
+    hasSelfPercent,
+    normalStyle,
+    setWidth,
+    setHeight
+  } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({
     props,
@@ -356,31 +363,39 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
 
   useEffect(() => {
     if (!isSvg && isLayoutMode) {
-      RNImage.getSize(src, (width: number, height: number) => {
-        state.current.imageWidth = width
-        state.current.imageHeight = height
-        state.current.ratio = !width ? 0 : height / width
-
-        if (isWidthFixMode
-          ? state.current.viewWidth
-          : isHeightFixMode
-            ? state.current.viewHeight
-            : state.current.viewWidth && state.current.viewHeight) {
-          state.current.viewWidth && setViewWidth(state.current.viewWidth)
-          state.current.viewHeight && setViewHeight(state.current.viewHeight)
-          setRatio(!width ? 0 : height / width)
-          setImageWidth(width)
-          setImageHeight(height)
-          state.current = {}
+      RNImage.getSize(
+        src,
+        (width: number, height: number) => {
+          state.current.imageWidth = width
+          state.current.imageHeight = height
+          state.current.ratio = !width ? 0 : height / width
+
+          if (isWidthFixMode
+            ? state.current.viewWidth
+            : isHeightFixMode
+              ? state.current.viewHeight
+              : state.current.viewWidth && state.current.viewHeight) {
+            state.current.viewWidth && setViewWidth(state.current.viewWidth)
+            state.current.viewHeight && setViewHeight(state.current.viewHeight)
+            setRatio(!width ? 0 : height / width)
+            setImageWidth(width)
+            setImageHeight(height)
+            state.current = {}
+            setLoaded(true)
+          }
+        },
+        () => {
           setLoaded(true)
         }
-      })
+      )
     }
   }, [src, isSvg, isLayoutMode])
 
   const innerProps = useInnerProps(
-    props,
     extendObject(
+      {},
+      props,
+      layoutProps,
       {
         ref: nodeRef,
         style: extendObject(
@@ -390,8 +405,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
           isHeightFixMode ? { width: fixedWidth } : {},
           isWidthFixMode ? { height: fixedHeight } : {}
         )
-      },
-      layoutProps
+      }
     ),
     [
       'src',
@@ -440,7 +454,13 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
 
   const LayoutImage = createElement(View, innerProps, loaded && BaseImage)
 
-  return isSvg ? SvgImage : isLayoutMode ? LayoutImage : BaseImage
+  const finalComponent = isSvg ? SvgImage : isLayoutMode ? LayoutImage : BaseImage
+
+  if (hasPositionFixed) {
+    return createElement(Portal, null, finalComponent)
+  }
+
+  return finalComponent
 })
 
 Image.displayName = 'mpx-image'

package/lib/runtime/components/react/mpx-input.tsx

@@ -39,7 +39,6 @@
  */
 import { JSX, forwardRef, useRef, useState, useContext, useEffect, createElement } from 'react'
 import {
-  Platform,
   TextInput,
   TextStyle,
   ViewStyle,
@@ -51,13 +50,15 @@ import {
   TextInputSelectionChangeEventData,
   TextInputFocusEventData,
   TextInputChangeEventData,
-  TextInputSubmitEditingEventData
+  TextInputSubmitEditingEventData,
+  NativeTouchEvent
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
 import { useUpdateEffect, useTransformStyle, useLayout, extendObject, isIOS } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { FormContext, FormFieldValue, KeyboardAvoidContext } from './context'
+import Portal from './mpx-portal'
 
 type InputStyle = Omit<
   TextStyle & ViewStyle & Pick<FlexStyle, 'minHeight'>,
@@ -191,7 +192,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
 
   const [inputValue, setInputValue] = useState(defaultValue)
   const [contentHeight, setContentHeight] = useState(0)
-  const [selection, setSelection] = useState({ start: -1, end: -1 })
+  const [selection, setSelection] = useState({ start: -1, end: tmpValue.current.length })
 
   const styleObj = extendObject(
     { padding: 0, backgroundColor: '#fff' },
@@ -202,6 +203,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   )
 
   const {
+    hasPositionFixed,
     hasSelfPercent,
     normalStyle,
     setWidth,
@@ -217,15 +219,17 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
 
   useEffect(() => {
     if (inputValue !== value) {
-      setInputValue(parseValue(value))
+      const parsed = parseValue(value)
+      tmpValue.current = parsed
+      setInputValue(parsed)
     }
   }, [value])
 
   useEffect(() => {
-    if (typeof cursor === 'number') {
+    if (selectionStart > -1) {
+      setSelection({ start: selectionStart, end: selectionEnd === -1 ? tmpValue.current.length : selectionEnd })
+    } else if (typeof cursor === 'number') {
       setSelection({ start: cursor, end: cursor })
-    } else if (selectionStart >= 0 && selectionEnd >= 0 && selectionStart !== selectionEnd) {
-      setSelection({ start: selectionStart, end: selectionEnd })
     }
   }, [cursor, selectionStart, selectionEnd])
 
@@ -286,6 +290,10 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     setKeyboardAvoidContext()
   }
 
+  const onTouchEnd = (evt: NativeSyntheticEvent<NativeTouchEvent & { origin?: string }>) => {
+    evt.nativeEvent.origin = 'input'
+  }
+
   const onFocus = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
     setKeyboardAvoidContext()
     bindfocus && bindfocus(
@@ -384,6 +392,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }
 
   const resetValue = () => {
+    tmpValue.current = ''
     setInputValue('')
   }
 
@@ -423,8 +432,10 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }, [focus])
 
   const innerProps = useInnerProps(
-    props,
     extendObject(
+      {},
+      props,
+      layoutProps,
       {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle),
@@ -436,25 +447,23 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         maxLength: maxlength === -1 ? undefined : maxlength,
         editable: !disabled,
         autoFocus: !!autoFocus || !!focus,
-        selection: selection,
+        selection: selectionStart > -1 || typeof cursor === 'number' ? selection : undefined,
         selectionColor: cursorColor,
         blurOnSubmit: !multiline && !confirmHold,
         underlineColorAndroid: 'rgba(0,0,0,0)',
         textAlignVertical: textAlignVertical,
         placeholderTextColor: placeholderStyle?.color,
-        multiline: !!multiline
-      },
-      !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType },
-      layoutProps,
-      {
+        multiline: !!multiline,
         onTouchStart,
+        onTouchEnd,
         onFocus,
         onBlur,
         onChange,
         onSelectionChange,
         onContentSizeChange,
         onSubmitEditing: bindconfirm && !multiline && onSubmitEditing
-      }
+      },
+      !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }
     ),
     [
       'type',
@@ -474,7 +483,14 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
       layoutRef
     }
   )
-  return createElement(TextInput, innerProps)
+
+  const finalComponent = createElement(TextInput, innerProps)
+
+  if (hasPositionFixed) {
+    return createElement(Portal, null, finalComponent)
+  }
+
+  return finalComponent
 })
 
 Input.displayName = 'MpxInput'