Opening hidden content wysiwyg editor how to scroll to bottom area?

[sergeynilov]

trafficstars

Hello, In my @vue/cli 4.0.5 app I need in in dialog modal to show details page with Cancel, Submit buttons. Also I added checkbox clicking on which hidden at bottom of the content wysiwyg editor must be shown and focused. As details info can be rather big I use auto scrolling on the content area. I use ocus directives and https://github.com/rigor789/vue-scrollto plugin(I have ^2.19.1), but it works different I expect: Hidden area with the wysiwyg editor is opened and scrolled at top, but not at bottom, as I need. Also wysiwyg editor is not focused. I do :

<div class="modal-body flexbox-item fill-area content flexbox-item-grow simple_bordered_block" v-if="draggableTask">
	<div class="fill-area-content flexbox-item-grow" style="overflow-y: auto; max-height: 500px; " id="draggable_task_container">
		
		<div class="card-title p-1 m-1">
			<h4 class="task_title mb-1 pbR-3">{{ draggableTask.name }}</h4>
			
			<div class="row_content_left_aligned">
				CONTENT...
			</div>
			<p class="pre-formatted m-3 description-text" v-html="draggableTask.description"></p>
			
			
			<dl class="block_2columns_md m-3" v-show="fillInfoText"> <!-- By default hidden area -->
				<dt class="horiz_divider_left_13">
					<label class="col-form-label" for="draggableTaskInfo">Info :</label>
				</dt>
				<dd class="horiz_divider_right_23">
					<wysiwyg v-model="draggableTaskInfo" ref="draggable_task_info_editor" />
				</dd>
			
			</dl>
		
		</div>
	
	
	
	</div>
</div>


<section class="modal-footer form-row row_content_right_aligned mb-3">
	<input
		class="editable_field custom-control-input"
		type="checkbox"
		value="1"
		style="width: 50px;padding-left: 60px;"
		id="fillInfoText"
		v-model="fillInfoText"
		:checked="fillInfoText"
		v-on:change="changeFillInfoText()"
<!--		CHECKED BOX TO SHOW EDITOR-->
	>
	<label
		class="custom-control-label mb-2"
		for="fillInfoText"
	>You can fill info text
	</label>
	
	
	<button type="button" class="btn btn-secondary btn-sm m-2" @click.prevent="cancelTaskPanel()">
		<i :class="'i_link '+getHeaderIcon('cancel')"></i>Cancel
	</button>
	<button @click.prevent="changeTaskStatus()" type="button" class="btn btn-primary btn-sm m-2 ml-4 mr-4">
		<i :class="getHeaderIcon('save')"></i>Submit
	</button>
</section>


<script>
	...
	import wysiwyg from "vue-wysiwyg"
	...
	let VueScrollTo = require('vue-scrollto')
	Vue.use(VueScrollTo)
	Vue.use(VueScrollTo, {
		container: "body",
		duration: 500,
		easing: "ease",
		offset: 0,
		force: true,
		cancelable: true,
		onStart: false,
		onDone: false,
		onCancel: false,
		x: false,
		y: true
	})
	
	
	export default {
		directives: {focus: focus},
		...
	
		data() {
    		return {
    			fillInfoText: false,
	    		focused: false,
	    ...
			
	    methods: {
		    changeFillInfoText() {
				this.focused= this.fillInfoText // setting focused
				let element= this.$refs.draggable_task_info_editor // ref to my editor
				let VueScrollTo = require('vue-scrollto')
				let options = {
					container: '#draggable_task_container',     // that is scrolling div
					easing: 'ease-in',
					offset: -60, // I tried to change this parameter to different vaLues, trying to make scroll at top of page, but failed
					force: true,
					cancelable: true,
					x: 100,   // I tried to change this parameter to different vaLues, trying to make scroll at top of page, but failed
					y: 50.  // I tried to change this parameter to different vaLues, trying to make scroll at top of page, but failed
					// x: false,
					// y: true
				}
			
				let duration= 200
				let cancelScroll = VueScrollTo.scrollTo(element, duration, options)
			
			} // changeFillInfoText

How to make it working ?

Thanks!