Prevent drag event to start when input field was clicked in Angular 7

See also questions close to this topic

• How to get only one question to the preview page in survey management website in angular?

  I am using querystring to h=get the questions on preview page but I am not able to get one question on 1st page and 2nd on another page after clicking next button.

  Querystring

  const queryString = {
        SurveyId: 1,
        PageNo: 0,
        PageSize: 20
      };
  
• @Host() or ng-container incompatibility between angular 9 and 10

  Here are two live examples on stackblitz:

  • angular 9
  • angular 10

  To check the difference between them, open console and notice that:

  In form-error-control-name.directive.ts line 22:

  For angular 9, this.parent.control is not null For angular 10, this.parent.control will throw error

  What is the difference? I checked angular 10 update doc but don't know which incompatibility this is.

  Thanks!
• How can I delete a row by its SKU instead of its ID?

  I try to delete the row using the sku of the product. I'm using spring boot and angular. I got an error when I added the sku on my button like this one (click)="onDeleteProductBySku(deleteClick?.sku)" it said that the Property 'sku' does not exist on type '(product: Product) => void'.. On my command prompt, I got this error. How can I solve this problem?

  Error: product/product.component.html:50:109 - error TS2339: Property 'sku' does not exist on type '(product: Product) => void'.
  
  50 <button class="btn btn-outline-danger btn-sm me-2" (click)="onDeleteProductBySku(deleteClick?.sku)">Delete</button>
                                                                                                                                    
  product/product.component.ts:12:16
      12   templateUrl: './product.component.html',
                        ~~~~~~~~~~~~~~~~~~~~~~~~~~
  Error occurs in the template of component ProductComponent.
  

  ProductsController.java --> This is working on the postman.

  //Delete a product record using sku
  //http://localhost:8080/products/deletebysku?sku=12345678
  
  @DeleteMapping("/products/deletebysku")
  @ResponseBody
  private void deleteProductBySku(@RequestParam String sku){
      productsService.deleteProductBySku(sku);
  }
  

  product.component.ts

   public deleteProduct!: Product;
  
   public onDeleteProductBySku(sku: string): void {
      this.productServive.deleteProductBySku(sku).subscribe(
        (response: void) => {
          this.messageShow();
          console.log(response);
          this.getAllProduct();
        },
        (error: HttpErrorResponse) => {
          this.errorMessage(error.message);
        }
      );
   }
  
   public deleteClick(product: Product) {
     this.deleteProduct = product;
     console.log("delete by sku");
   }
  

  product.service.ts

  public deleteProductBySku(sku: string): Observable<void> {
    return this.http.delete<void>(`${this.apiServerUrl}/products/deletebysku?sku=${sku}`);
  }
  

  product.component.html

  <button class="btn btn-outline-danger btn-sm me-2" (click)="onDeleteProductBySku(deleteClick?.sku)">Delete</button>
  
• How can I get toast-ui editor content?

  I am a student studying. I think I'm doing it conceptually wrong.

  I'm trying to use vue3 and type script And I'm going to use toast-ui editor.

  I get some errors.

  1. refEditor.value.invoke is not a function

  How can I get toast-ui editor content?

  this is my code

  <template>
    <div class="markup-tables flex">
      <va-card :title="$t('tables.stripedHoverable')">
        <va-card-content>
          <div id="refEditor" ref="refEditor"></div>
          <br />
          <div class="row justify--end paginationButtons-left">
            <va-button class="mr-2 mb-2">List</va-button>
          </div>
          <div class="row justify--end paginationButtons-right">
            <va-button class="mr-2 mb-2" @click="getHTML">Save</va-button>
          </div>
        </va-card-content>
      </va-card>
    </div>
  </template>
  
  <script lang="ts">
  import '@toast-ui/editor/dist/toastui-editor.css'
  
  import Editor from '@toast-ui/editor'
  import { defineComponent, onMounted, ref } from 'vue'
  
  import data from '@/data/tables/markup-table/data.json'
  
  export default defineComponent({
    name: 'BoardWrite',
    setup() {
      const refEditor = ref(null)
  
      const getHTML = () => {
        console.log('getHTML test')
        let html = refEditor.value.invoke('getHtml')
        console.log(html)
        // ERROR 
      }
  
      onMounted(() => {
        const editor = new Editor({
          el: refEditor.value,
          height: '700px',
          initialEditType: 'markdown',
          previewStyle: 'vertical',
        })
        editor.getMarkdown()
      })
  
      return {
        getHTML,
        refEditor,
      }
    },
  })
  </script>
  
• Custom utility types (generic types) for classes `IsClass` of TypeScript

  I am trying to create a generic type to make sure the first parameter to be a class. However, the factory function parameter cannot be replaced by a generic type.

  The following upper parts were my attempts. The last part were a working example that directly write the extends ... which worked.

  Why does it works inside a function, but not works as a generic type IsClass?

  class A {
    constructor() {
  
    }
  }
  class B {}
  class C extends B {}
  
  // ERRORS:
  
  type IsClass<T extends new (...args: any) => InstanceType<T>> = T
  type IsClass2<T> = T extends new (...args: any) => InstanceType<T>? T: never
  
  type X = IsClass<A>
  type Y = IsClass2<A>
  
  function someFactoryError<T>(clx: IsClass<T>) {
    return new clx()
  }
  
  someFactoryError(A)
  
  function someFactoryError2<T>(clx: IsClass2<T>) {
    return new clx()
  }
  
  someFactoryError2(A)
  
  // WORKS:
  
  function someFactoryWorks<T extends new (...args: any) => InstanceType<T>>(clx: T) {
    return new clx()
  }
  
  const a0 = someFactoryWorks(A)
  const b0 = someFactoryWorks(B)
  

  TypeScript Playground

  Related:

  • stackoverflow
  • TypeScript Handbook: Abstract Construct Signatures
• Async function passed as prop into React component causing @typescript-eslint/no-misused-promises error

  I have the following asynchronous submitNewPatient function which is throwing @typescript-eslint/no-misused-promises error message from elint. Is it possible to adjust the function such that it removes this error?

  const submitNewPatient = async (values: PatientFormValues) => {
      try {
        const { data: newPatient } = await axios.post<Patient>(
          `${apiBaseUrl}/patients`,
          values
        );
        dispatch({ type: "ADD_PATIENT", payload: newPatient });
        closeModal();
      } catch (e: unknown) {
        if (axios.isAxiosError(e)) {
          console.error(e?.response?.data || "Unrecognized axios error");
          setError(
            String(e?.response?.data?.error) || "Unrecognized axios error"
          );
        } else {
          console.error("Unknown error", e);
          setError("Unknown error");
        }
      }
    };
  

  Component used to pass function as a prop:

  <AddPatientModal
          modalOpen={modalOpen}
          onSubmit={submitNewPatient}
          error={error}
          onClose={closeModal}
        />
  

  I have also tried the following which removes the eslint error message based. However, seems like I am not entering the async code block (perhaps not triggering the async() function):

    const submitNewPatient = (values: PatientFormValues) => {
      async () => {
        try {
          const { data: newPatient } = await axios.post<Patient>(
            `${apiBaseUrl}/patients`,
            values
          );
          dispatch({ type: "ADD_PATIENT", payload: newPatient });
          closeModal();
        } catch (e: unknown) {
          if (axios.isAxiosError(e)) {
            console.error(e?.response?.data || "Unrecognized axios error");
            setError(
              String(e?.response?.data?.error) || "Unrecognized axios error"
            );
          } else {
            console.error("Unknown error", e);
            setError("Unknown error");
          }
        }
      };
    };
  
• Pinning a particular element using a drag and drop library in React

  I am migrating from react-beautiful-dnd to dnd-kit which does not have customization to pin a particular HTML element and the others we can drag and drop.

  Like in this image I can drag the Drag Me Item 2 but it can't go above Pinned Item 1.I want the Pinned Item 1 to remain fixed and it should not rearrange itself according to the other items if I drag them above it. It should always be at the 1st position.

  

  With dnd-kit we have a disabled example like above but we still can drag 2 above 1 despite 1 being disabled.

  

  My codesandbox. I was trying to keep the first card with Clauderic always pinned to the 1st position.

  How can I solve this using dnd-kit or any other drag and drop library in React?
• Javascript - Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

  I have this code in my vue component

  <template>
    <div class="container-fluid p-0">
      <div class="row m-0">
        <div class="col-12 vh-100 p-0" @drop="drop($event)" @dragover.prevent id="camView">
          <canvas class="position-absolute top-0 end-0" ref="targetImg" id="targetImg"></canvas>
          <div class="position-absolute" id="selection" draggable="true" @dragstart="drag($event)"></div>
          <img src="@/assets/lu.jpeg" class="img-fluid" id="srcImg" ref="srcImg">
        </div>
      </div>
    </div>
  </template>
  
  <script>
  
  export default {
    name: 'DropView',
    data() {
      return {
  
      }
    },
    mounted() {
   
    },
    methods: {
      drag(e) {
        console.log(e)
        e.dataTransfer.setData('text', e.target.id);
      },
      drop(e) {
        console.log(e)
        e.preventDefault();
        let data = e.dataTransfer.getData('text');
        console.log(data)
        let box = document.getElementById(data)
        console.log(box)
        e.target.appendChild(box);
      }
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="scss">
  .col-12 {
    #selection {
      width: 360px;
      height: 240px;
      border-style: dashed;
      border-width: 1px;
      border-color: white;
      background-color: transparent;
      z-index: 1;
    }
    #target-img {
      overflow: hidden;
      width: 320px;
      height: 240px;
      z-index: 1;
    }
    #srcImg {
      height: 100%;
      display: block;
      width: 100%;
      object-fit: cover;
    }
  }
  </style>
  

  I'm trying to use drag and drop to moove a div that is positioned on top of an image. I'm able to start the drag operation but when I release the div into another position I will get this error in console

  Vue warn]: Unhandled error during execution of native event handler 
  Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
  

  I've noticed that the div will disappear and is not mooved. Is there any fix?
• Xamarin Drag and drop how to edit balloon icon and text see image

  Using the drag drop sample https://github.com/xamarin/xamarin-forms-samples/tree/main/WorkingWithGestures/DragAndDropGesture I'm not sure its actually a notify balloon not sure of its correct terminology making it hard to search. In the image you can see when drop location is active it displays in the ballon the copy icon and copy as text. I want to change the icon and the text but not sure how. I have tried the following code but it doesn't do anything.

  private void OnCorrectDragOver(object sender, DragEventArgs e)
      {
          e.Data.Text = "My text data goes here";
          e.Data.Image = "plusicon.png";
      }