填写单横向超出bug修改2096

src/components/SpreadDrop/index.jsx

@@ -2,7 +2,7 @@ import React,{Component} from 'react';
 import classNames from 'classnames';
 import config from '@config/index.js';
 import style from './index.less';
-import {deepClone,filterArr,handleEnter,isIE,windowEventHandler,filterDataArr,getIds} from '@utils/tools.js';
+import {deepClone,filterArr,handleEnter,isIE,windowEventHandler,filterDataArr,getIds,getPageCoordinate} from '@utils/tools.js';
 import {Notify} from '@commonComp';
 import $ from 'jquery';
 /****
@@ -44,8 +44,10 @@ class SpreadDrop extends Component{
       ban:{},  //放'伴'字段
       editable:false,      //双击编辑
       labelVal:'',  //存放标签原有的值--主诉字数限制用
+      left:'auto',
     };
     this.$div = React.createRef();
+    this.$list = React.createRef();
     this.handleSelect = this.handleSelect.bind(this);
     this.clearState = this.clearState.bind(this);
     this.handleClear = this.handleClear.bind(this);
@@ -67,6 +69,12 @@ class SpreadDrop extends Component{
         ++num
       }
     });
+    const listWidth = 30+$(this.$list.current).width();
+    if(num >= 5 && windowWidth-getPageCoordinate(e).boxLeft < listWidth){
+      this.setState({
+        left:windowWidth-listWidth-150
+      })
+    }
     // window.event? window.event.cancelBubble = true : e.stopPropagation();
      this.setStateInit();      //恢复初始选中状态
     const that = this;
@@ -336,7 +344,7 @@ class SpreadDrop extends Component{
 
   render(){
     const {placeholder,value,show,data,order} = this.props;
-    const {editable} = this.state;
+    const {editable,left} = this.state;
     return  <div className={style['container']}
               onFocus={(e)=>e.stopPropagation()}
               onBlur={(e)=>e.stopPropagation()}
@@ -351,7 +359,7 @@ class SpreadDrop extends Component{
         onInput={this.onChange}
         onkeydown={handleEnter}
         >{value||placeholder}</div>
-          <ListItems data={data} order={order}
+          <ListItems parDiv={this.$list} data={data} order={order} left={left}
              show={show} handleSelect={this.handleSelect} handleConfirm={this.handleConfirm} handleClear={this.handleClear} {...this.state}></ListItems>
       </div>
   }
@@ -360,6 +368,7 @@ class SpreadDrop extends Component{
 class ListItems extends Component{
   constructor(props){
     super(props);
+    this.$cont = React.createRef();
   }
   getLabels(){
     const {data,handleSelect} = this.props;
@@ -388,14 +397,15 @@ class ListItems extends Component{
     return list;
   }
   getStyle(){
-    const {show} = this.props;
+    const {show,left} = this.props;
     return {
-      display:show?'block':'none'
+      display:show?'block':'none',
+      left:left
     }
   }
   render (){
-    const {handleClear,handleConfirm,order} = this.props;
-    return <div className={style["drop-list"]} style={this.getStyle()} contentEditable="false" onClick={(e)=>{e.stopPropagation();}}>
+    const {handleClear,handleConfirm,order,parDiv} = this.props;
+    return <div className={style["drop-list"]} ref={parDiv} style={this.getStyle()} contentEditable="false" onClick={(e)=>{e.stopPropagation();}}>
         <p className={style['orderTips']}>按{order?'从左到右从上到下':'点击'}顺序成文</p>
         {this.getLabels()}
         <div className="oper clearfix">